Have you ever been on your laptop, late in the evening and just thought, “My eyes sure are tired”? Speaking for myself, this happens quite a bit and I find that the bright white background of most sites tends to be the main cause.
This isn’t just a musing or my own idea, there are studies that show bright whites/bright screens lead to faster eye fatigue. So, it’s no wonder when an app offers a dark theme or a night mode that I tend to enable this feature right away.
As a web developer myself, building and enabling features like this have often meant writing multiple styles and sending down multiple CSS files for both light and dark mode. However, all of this has changed with the introduction of System Wide Dark Mode and even more recently with the introduction of the
prefers-color-scheme media query.
In case you missed it, last week we offered a live walkthrough of Ionic Enterprise Edition, the premier and supported version of everything you need to build native-powered apps with Ionic.
During that discussion, Ionic’s IEE Product Manager, Matt Kremer, and I dug into the top challenges that enterprise development teams face when building mission-critical applications. We walked through each one and discussed how Ionic Enterprise Edition addresses them. If you’d like to learn more, check out the on-demand recording.
The purpose of this post is to go back and address some of the many great questions that we weren’t able to get to in the Q&A session. Some of them are specific to Ionic Enterprise Edition, and some are about Ionic application development in general.
We are excited to announce that our first feature release after Ionic 4.0 is out now! In keeping true to using code names from the periodic table of elements, Ionic 4.1 is named Hydrogen (after the initial release of Neutronium).
We have some exciting new features to share in this release, so let’s dive right in!
Nothing strikes fear into the hearts of developers quite like being told their app is slow. Because of this, great pains are taken to optimize the loading and startup performance in our apps. The techniques we use have changed over the years, but the good news is that a lot of the heavy lifting is now done for us by our frameworks and build systems.
In this post, we will take a look at how lazy loading can be used to help speed up the load times of your Ionic Angular apps. Also, it doesn’t matter if your app is packaged and downloaded from the store, or a progressive web app (PWA) running off a server, lazy loading can help increase your startup times in both situations.
We’re thrilled to have recently announced the release of Ionic’s fourth major version, and its ability to work across all frameworks (or with no framework at all).
We’ve been overwhelmed with the positive feedback, and so far 4.0 has exceeded our expectations of what’s been possible with a rewrite. So, with the official Ionic Framework 4.0.0 release behind us, I figured now would be a great time to lay out our roadmap and immediate plans for next steps—a vision, if you will, for where we hope to take Ionic Framework in the near future…
Today, we’re excited to announce that Ionic React is now available in beta! Take a read below to understand more about this release and how to get started building with Ionic and React.
A Quick History
If you are familiar with Ionic Framework, you more than likely associate it with Angular. Historically, your assumption would be correct, as Ionic and Angular have been exclusively paired for a long time. However, with the recent release of Ionic Framework 4.0 this has changed: Now, Ionic’s core is able to adapt and expand to support many different frameworks. In previous posts, we mentioned that Vue and React were in the works…
Finally, however, we’re thrilled to share that the
@ionic/react beta is here! 🎉
This post is contributed by Kevin Ports, designer and front-end developer at Ionic. He’s passionate about pixels, code, and the space in between.
If you’re building a handful of apps in a startup or small business, delivering a consistent user experience across teams and projects is relatively easy. But if you represent a global corporation with hundreds of developers and designers distributed throughout the world, enforcing a set of design standards can get messy. Having a Design System can help.
A Design System is a centralized library of components that can be shared across teams and projects to simplify design and development while ensuring consistent brand experiences, at scale. In some cases, a Design System is nothing more than a collection of visual design specs. But for the purposes of this post, we’re going to talk about Design Systems as a collection of real-code components that front-end developers drop in their projects like Lego blocks, to quickly build new user experiences without having to worry about the core design of each component.
The HubSpot team, a pioneer in Design Systems, explains why this is valuable:
“That’s the beauty of building a design system. By deciding on a detail once, you free up your entire product development team to focus on solving actual customer problems.”
Of course, for HubSpot, it took 34+ designers and over two years of work to perfect their Design System. For most businesses, that kind of commitment just isn’t feasible.
Enter: Web Components. In this post, I’ll explain the five reasons why Web Components are the perfect way to quickly bootstrap a new Design System, with a future-proof design that will benefit you for years to come.
A few months ago, we wrote about the release of Chrome 70, its slew of new features, and what this update meant for the future progressive web apps (PWAs).
To quickly recap, Chrome 70’s release allowed PWAs to be installed on a user’s device via the browser, much like a native app with new features that improved the user experience. Given that Chrome holds the majority of browser market share, it was an exciting move by a major industry player to add more capabilities that helped inch PWAs closer to the mainstream.
Cut to earlier this month, when Chrome’s latest PWA update dropped in Chrome 72, which added a new feature that opened up the Google Play Store to PWAs as first-class citizens. The news initially broke through a developer’s Medium post, with Google following up a few days later when it published more information about using Trusted Web Activities (TWAs): The newly released feature that allows PWAs to be hosted in its Play Store.
At Ionic, we are big fans of TypeScript and use it in several of our important projects, including Ionic Framework, Stencil, Studio, and AppFlow. We find TypeScript beneficial for a number of reasons, but mostly because it helps us scale our large (and fairly complex) codebases in many areas, including:
- Catching bugs before build time through static type checking
- Providing code completion and refactoring support in many of our favorite editors, like VS Code, WebStorm, and even Vim
We think TypeScript is great, and we think many of our Ionic Angular developers would agree. We have also found TypeScript to be beneficial outside of Angular as well. In fact, we use it in our own AppFlow dashboard, which is a large React app.
Over the past couple of years, TypeScript has started to gain momentum in the React world and, now, has official support in create-react-app. So, we thought it would be helpful to share a little tutorial on how to kick off a new React project using TypeScript.
This is a guest post from Simon Grimm, Ionic Developer Expert and educator at the Ionic Academy. Simon also writes about Ionic frequently on his blog Devdactic.
In this tutorial we will look at the new navigation system inside Ionic Framework 4.0 to learn how to use the powerful CLI, to understand how your Ionic 3 logic can be converted to v4, and, finally, the best way to protect pages inside your app if you plan to use an authentication system at any point.