{"id":777,"date":"2019-04-25T19:31:10","date_gmt":"2019-04-25T19:31:10","guid":{"rendered":"http:\/\/www.smart-bricks.net\/?p=777"},"modified":"2019-04-28T22:23:11","modified_gmt":"2019-04-28T22:23:11","slug":"ionic-version-4-from-angular-to-react-vue-and-web-components","status":"publish","type":"post","link":"http:\/\/www.smart-bricks.net\/index.php\/2019\/04\/25\/ionic-version-4-from-angular-to-react-vue-and-web-components\/","title":{"rendered":"Ionic Version 4: from Angular to React, Vue, and Web Components"},"content":{"rendered":"\n

The Ionic 4 release<\/a>\n represents a substantial change, moving from a mobile framework for \nAngular users to a framework-agnostic approach that adds support for React<\/a>, Vue.js<\/a>, and web components<\/a>.<\/p>\n\n\n\n

As explained by Ionic CEO Max Lynch<\/a>, this change is driven by frontend churn:<\/p>\n\n\n\n

At the end of 2017, we started asking ourselves if our original dream\n was worth revisiting. It was clear that frontend developers would never\n settle on any specific frontend framework or libraries, so assuming \notherwise was futile. At the same time, we were frustrated that Ionic \ncould only be used by those that embraced Angular. While we loved \nAngular, we hated the idea that Ionic wasn\u2019t achieving its original goal\n of being a toolkit for every web developer in the world.<\/p><\/blockquote>\n\n\n\n

Starting with this release, Ionic is distributed as a collection of approximately 100 web components, leveraging the custom elements<\/a> and shadow DOM<\/a>\n APIs. With these changes, developers may use Ionic’s components in \nmobile, desktop, and progressive web apps via HTML tags supported by \ncustom elements.<\/p>\n\n\n\n

Ionic 4 moves from encouraging usage of its own CLI to that of the underlying framework<\/a> to give developers the most out of their framework\u2019s ecosystem. The official Vue.js<\/a> and React<\/a> Ionic bindings are in alpha at the time of the Ionic 4 release.<\/p>\n\n\n\n

Similar to changes seen in several other modern frameworks like Dojo<\/a> and Svelte<\/a>, Ionic targets web standards where possible to minimize frontend framework churn and fragmentation.<\/p>\n\n\n\n

Beyond its independence from specific frameworks, Ionic also focuses on being a web-based design system<\/a>. Each Ionic component includes theme support for the latest iOS and material design standards. Ionic leverages CSS Custom Properties<\/a> in each component to simplify theming of components.<\/p>\n\n\n\n

Last year Ionic announced Stencil<\/a>, a standalone web component compiler project. Ionic leverages Stencil to optimize for load and render performance. The web components benchmark<\/a> compares the performance of Stencil and other web component frameworks.<\/p>\n\n\n\n

Beyond the Ionic 4 release, the Ionic team looks forward to \nimprovements for desktop-specific UI support, keyboard scenarios, \ntheming, animations, and more. Additionally, Ionic is working to include\n Capacitor<\/a>, a Cordova alternative<\/a>, for new Ionic projects.<\/p>\n\n\n\n

To get started with Ionic 4, install or update the Ionic CLI and then start an application:<\/p>\n\n\n\n

npm install -g ionic\nionic start my-app<\/code><\/pre>\n\n\n\n
Ionic provides application starter templates and the Ionic conference reference application<\/a>.<\/p>\n\n\n\n
Ionic is open source software available under the MIT license. Contributions and feedback are encouraged via the Ionic GitHub project<\/a> and should follow the Ionic contribution guidelines<\/a> and code of conduct<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
The Ionic 4 release represents a substantial change, moving from a mobile framework for Angular users to a framework-agnostic approach that adds support for React, Vue.js, and web components. As explained by Ionic CEO Max Lynch, this change is driven by frontend churn: At the end of 2017, we started asking ourselves if our original… Read More »Ionic Version 4: from Angular to React, Vue, and Web Components<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[28,27,12],"_links":{"self":[{"href":"http:\/\/www.smart-bricks.net\/index.php\/wp-json\/wp\/v2\/posts\/777"}],"collection":[{"href":"http:\/\/www.smart-bricks.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.smart-bricks.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.smart-bricks.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.smart-bricks.net\/index.php\/wp-json\/wp\/v2\/comments?post=777"}],"version-history":[{"count":1,"href":"http:\/\/www.smart-bricks.net\/index.php\/wp-json\/wp\/v2\/posts\/777\/revisions"}],"predecessor-version":[{"id":778,"href":"http:\/\/www.smart-bricks.net\/index.php\/wp-json\/wp\/v2\/posts\/777\/revisions\/778"}],"wp:attachment":[{"href":"http:\/\/www.smart-bricks.net\/index.php\/wp-json\/wp\/v2\/media?parent=777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.smart-bricks.net\/index.php\/wp-json\/wp\/v2\/categories?post=777"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.smart-bricks.net\/index.php\/wp-json\/wp\/v2\/tags?post=777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}