We’re happy to announce that we have a new managing partner on board – Rami Wazni. With over two decades of experience in the software development industry, Wazni will be responsible for overseeing Appstronauts’ North American division and helping to increase our presence in the region.
With geolocation, you offer extra value to your app’s users and increase the competitive advantage. And it’s super easy to implement with Ionic. Discover what are the benefits and how to do it.
Ionic 4 is here! And as many developers claim, this is the best Ionic’s version ever. Ionic already had many advantages, but now there are many upgrades and new features. Find out what changed in Ionic 4!
And that changed the game! In the new version, Ionic components are now Web Components. What’s the consequence?
To clarify, Web Components are a set of web APIs that have extensive support on modern browsers. With Web Components, we can create custom, reusable HTML tags to use in web pages and web apps. Developers can generate widgets and components on the Web Components standards and use them with any JavaScript framework that works with HTML. Browsers interprete that kind of components natively. They are part of the browser, so they don’t need external libraries or frameworks. Technologies that relate to Web Components are among others Custom Elements and Shadow DOM.
What’s essential, Web Components push more work to a browser, which results in less coding. That’s one of the most important aims of Web Components: to enable developers re-using code as much as possible. Certainly, these changes significantly improved loading time and performance of Ionic apps. Therefore, Ionic 4 is perfect for Progressive Web Apps. But more on that later.
What is more, Shadow DOM isolates a component from any global styles or scripts applied to the website. You can be sure that everything displays as you want it to. That’s the thing our programmers really appreciated:
“I especially like changes in styling. Thanks to Shadow DOM it’s much easier to manage the design.”
It’s also worth mentioning here, that the Ionic team created a new web component compiler for building reusable UI components — Stencil. They use it to package each Ionic component as a web component.
Thanks to the fact that Ionic components are now Web Components, Ionic 4 is completely framework independent. As we mentioned before, web components work with any framework and even with no framework at all. Therefore, now Ionic works not only with Angular, as it was so far. It can work with any JavaScript framework, like Vue.js or React.js., or with no framework at all. Since then we had Ionic Angular, now there are also Ionic Vue and Ionic React. That’s a big win for the Ionic team because since the beginning they wanted to create an independent UI framework.
Our developer found that fact really game-changing:
“The best thing is that Ionic is now framework independent. What is more, we can use it without any framework at all. It allows us to check some solutions in plain Javascript project quickly. It’s a massive change as regards to Ionic 3.”
Ionic CLI is a Command Line Interface — a text-based interface used for interacting with a framework. It’s a tool that offers a lot of helpful commands for Ionic developers.
Ionic CLI 4.0 offers more features, works faster and is easier to use. It comes with Cordova integration with live-reload, building and debugging tools. It allows to use console commands to create components, new pages or directives, and custom schematics for generators. What is more, the new CLI works perfectly with Angular CLI so the developers could benefit from both.
Ionic 4 is also compatible with Capacitor, a cross-platform API and a code extension layer. Capacitor makes it easy to call the native SDKs and write custom native plugins. It also supports PWAs and allows developers to write one app and deploy it to two app stores.
Ionic 4 uses the Angular Router, one of the most important libraries of Angular. It allows the app to maintain its navigation state on browser reloads. A combination of Ionic Framework and Angular Router lets developers create applications with rich animations. What is more, with the new router, we don’t have to use deep-links to link to the various parts of our app.
Ionic 3 used navigation based on the simple stack, new pages were pushed on the top. To navigate backwards developers had to make a pop of the last page. Now it’s possible to use parallel navigation and exchange multiple navigation stacks at any time.
Lazy Loading is Ionic’s design pattern that allows distinguishing the moment of the initialization of components. The elements split into multiple bundles and load when it is required. That improves the performance and cuts loading time. Therefore, the performance is a lot better, and the apps are 1.5 x faster.
Ionic was already known for easy and rich documentation, but now it’s a lot better. Above all, the Ionic team completely redesigned and improved The Ionic Framework documentation. Therefore, it’s easy to maintain and update, with improved loading time and navigation. There are more examples, previews and code snippets that developers can drop directly into their app. New documentation is open source, and the team built it with previously mentioned Stencil. The design is simpler, navigation well-organized. In addition, components and API references are easily-understandable. Great job!
Ionicons is the official pack of icons delivered by the Ionic team. Developers can use them in Android, iOS, web, and desktop apps. In version 4.0 they are distributed as web components, and their sizes are significantly reduced. There are also some new icon forms that reflect the latest iOS trends.
Let’s start with the fact that the Ionic team designed Ionic 4 especially to be the best UI framework for building Progressive Web Apps. With Ionic 4 we can develop fast and reliable PWAs and reach high Lighthouse scores. Web components made using Stencil are lazy loaded and delivered in collections developers can easily use. That kind of components rank high in Lighthouse! Ionic 4 template app is progressive, and UI components are very flexible. Therefore, they allow developers to easily build a responsive design needed for PWAs. The framework supports using service workers to make the app work offline or with a bad connection.
Ionic Native is a set of Cordova plugins that allow adding native functionalities to apps. The community maintains them. What is more, now, Ionic Native 5.0 also is framework independent. It means that developers can use Typescript wrappers for Cordova plugins outside of Angular.
Developers can define CSS variables (Custom Properties) and reuse them in the document. When they access the code JavaScript, they use CSS variables to add advanced features. CSS Variables provide a standardized way of theming to Ionic apps, independently of the frontend frameworks. In Ionic 4 developers can change the overall look and feel of the app’s UI just by changing a few variables. There’s no need to use complex building tools.
What do developers think about that?
“The most significant change is making the Ionic framework agnostic. Other modifications are not so revolutionary but provide smooth evolution. Although for me, changes in theming make things easier.”
Ionic’s internal web animations library will migrate to the standardized Web Animation API. Therefore, it will be easier to provide custom web animations for Ionic. The team claims that soon they will give even more animation options.
The whole Ionic team watches issues the Ionic community reports. On the team’s GitHub Project Board we can track on which issues they are working on. What is more, they ship patch releases every two weeks. The Ionic community receives better support from the side of the Ionic team. What is more, they also provide better support for the desktop.
To sum up, Ionic 4 is a great UI framework for building cross platform apps and Progressive Web Apps. It’s framework independent, the performance is a lot better. Moreover, it has a few really useful features and upgrades.
At Appstronauts we’ve checked if it’s worth to migrate an app to Ionic 4. Results are really interesting.
Enter Appium, an open-source automation framework that has revolutionized the way mobile app testing is conducted. By leveraging the power of Appium’s capabilities, developers can now automate end-to-end tests for Ionic apps, enabling them to detect and address potential issues early on in the development cycle.
Creating native mobile apps for multiple platforms is an expensive process, which also requires a lot of time and competencies.
Svelte is gaining popularity among many developing applications IT companies. We were able to find out what these companies feel about using Svelte while working on the app development. If you are also interested
