As user interfaces (UI) go, tabs are a particularly useful pattern. The word “tab” invokes images of beige manila file folders. Early UI mimicked this physical property by placing buttons along the top of a dedicated space. Mobile devices, with their confined spaces, find the tab pattern in accordions, bottom button bars, and more.
In this example, we will look at the mechanics of building a tab component using Stencil.
Greetings, friend! You’re a web developer, team lead, or engineering manager who has discovered that Ionic products are awesome. They have helped you build cross-platform applications quickly, made the app development process enjoyable, and solved important mobile development problems. You can see that Ionic would be extremely beneficial in your daily job, but are wondering how to convince your boss to endorse the adoption of new software. In a nutshell:
You want to connect with decision-makers at your organization and showcase the value that Ionic brings to the business.
You know that Ionic is an open source mobile development kit for building high quality, cross-platform native and web applications in a single code base. Maybe your boss knows this too — or maybe they don’t. In either case, you can explain what Ionic is in a couple of sentences or less, but generating buy-in from the business perspective is the next big step.
Don’t worry; we’ve got you covered. Here are some talking points that should resonate with your boss and help you make your case.
And with that, Ioniconf 2021 has concluded! Ioniconf, our online conference for Ionic developers and the wider web development community, featured twelve expert Ionic speakers and was attended by many thousands of Ionic community members. We’re thrilled by the community’s reception to the event and are already looking forward to our next event taking place in September. Read on for a recap and links to all recorded talks.
To kick off the conference, various members of the Ionic team delivered a keynote featuring announcements across all of Ionic’s products. First up was Ionic CEO Max Lynch speaking about the state of the software industry. Since every company is becoming a software company, they are hungry for developer talent — specifically, web developers. Given the ubiquity of the web platform, standards that ensure code works the same across all browsers, and the popularity of the web stack, it’s the clear choice to invest in.
Today I’m excited to announce Identity Vault 5.0, the newest version of Ionic’s mobile biometrics solution. Featuring the latest in native security best practices, Identity Vault improves frontend security in any Ionic app by making it easy to add secure biometric authentication in minutes.
We created Identity Vault after many concerned enterprise teams told us they weren’t confident in their frontend security implementations. The concern is valid: if a device falls into the wrong hands and an app’s data (such as authentication tokens) is compromised, users could be vulnerable to data loss and unauthorized access to their accounts. That’s really bad for users, and it’s also dangerous to the integrity of your backend systems and public perception.
It turns out that many frontend authentication workflows store tokens where anyone can view and access them (such as in LocalStorage) or using weak authentication logic (such as using miscellaneous Cordova plugins) that are easily compromised. Identity Vault keeps users protected with the latest in multi-layer native security and best practices for storing authentication data on-device.
I have not seen a clock in a web-based user interface in a long time. This makes sense — they are pretty redundant these days. You have a clock on your watch, on your mobile device, and on your desktop, and those are just the digital versions available at a glance. Nonetheless, the process of building a clock can reveal a lot about how a platform works.
In this walkthrough, we will build a clock component using Stencil. We will use scalable vector graphics (SVG) to build the clock, play with the placement of the clock hands, and review different ways to animate those hands.
Take a look at the month view of a calendar and you will see several rows of numbers. The numbers themselves, increasing in value one after the other, are arranged in columns. HTML and CSS provide us with a number of tools to display content in rows and columns. Making a calendar component should be easy, right? Right?
When we look at the first calendar day in a month, it could fall on any day of the week. This in turn can push the last day of the month to also fall on any day of the week. That variation can mean that there are six weeks (six rows) in some months, but only five weeks (rows) in others. Then of course there are the number of days in the month and oddities such as leap years.
When we turn to Stencil (and Web Components in general), all of these variations beg the question “What goes in my template if I do not know what I will need to display?” The answer is to figure out what you will need to display before you display it. We can leverage the Stencil component lifecycle to override componentWillRender() and perform the required calculations.
Hello Friends! We know everyone is excited about the new features in Ionic Framework 6.0 beta, but that doesn’t mean we’re done with V5! In Ionic React 5.6, we packaged up a new set of hooks for controlling our overlay components that we think you might like. What is an overlay you ask? It’s the term we give components that display over your current content, such as alerts, modals, toasts, etc.
In this post, I’m going to go over how to use the new hooks to display these components in your apps. But first, let’s do a quick recap on how overlays worked before, and some of the challenges that you might encounter with them.
Today I’m excited to share some news about Stencil, Ionic’s open source toolchain that generates small, fast, and 100% standards-based Web Components that run in every browser. As you might have noticed, we’ve been actively increasing our investments across the entire Ionic App Platform, including the recent launch of Capacitor 3.0, Ionic Portals, tons of Appflow improvements, and the upcoming Ionic Framework v6.
We are also doubling down on Stencil with an expanded team, new enterprise offerings, and new development work underway on the core open source project.
Why Stencil? With downloads now reaching half a million per month, it’s clear the vibrant web development and design communities have adopted Stencil as the tool of choice for building reusable, shared component libraries. Companies love Stencil, too, using it to power popular consumer products like Apple TV and Amazon Music. And of course, we also love Stencil! After all, Stencil was built here at Ionic to power our own UI library, Ionic Framework.
With Stencil’s growth taking off, we’re making a number of investments to our open source project in order to keep pace with longstanding issues and feature requests, as well as meet the demand for large-scale adoption of Stencil in the enterprise, beginning with team expansion. This month we added new team members Ryan Waskiewicz and Will Riley, two software developers who are immensely passionate about building great developer experiences and are excited to be a part of Stencil’s future.
We look forward to watching the pace of Stencil development accelerate over the coming months and years, thanks to the expanded team and increased investment.
Earlier this week I had the privilege of giving the Ionic Framework Update at Ioniconf 2021 where we announced the Ionic Framework v6 beta. Ionic Framework has come far from its roots as an AngularJS-only UI library to a truly cross-platform framework for building Web Native applications. As we look to the future of Ionic Framework, let’s talk about some of the improvements coming in Framework v6 and how you can get access to these improvements today.
