Ionic + AngularJS

Ionic Framework

The Ionic Framework is the youngest with our top 5 stacks, as the Alpha was released in late November 2013. Built on top of the popular AngularJS framework from Google, Ionic utilizes AngularJS to provide the application Structure, while Ionic itself focuses on the user interface. In other words, we see a match between the power of Angular and the beauty of the Ionic UI.

Ionic provides a set of Angular directives (custom HTML elements) for it's own components, making it as easy-to-use the WI Dgets as writing a line of HTML code. In addition to directives, Ionic uses Angular ' s touch recognizers, view animation logic, HTML sanitation, and asynchronous Communication.

While you can use Ionic straight after cloning or unpacking the library zip, you can also install their node.js-based CLI Through NPM and start quickly with their seed project.

Even though Angular is currently the Ionic's workhorse, the developers is keeping their (and ours) options open with plan s to support other frameworks such as Knockout or EMBERJS. This particular review was strongly influenced by AngularJS and it doesn ' t vouch for the accuracy with other frameworks whe n Ionic support emerges.

mv* Pattern

Angular JS used to is an MVC framework, but over time it became closer to MVVM where the $scope object acts as a ViewModel , manipulated through a Controller function. With such a flexible approach developers can use MVC or MVVM per their liking, as long as the goal is achieved:separating Presentation from business logic while boosting maintainability and productivity.

Class System

Neither Angular JS or Ionic is Object oriented JavaScript frameworks so they don ' t make use of a class system. This can (but shouldn ' t) is observed as a weakness or a strength, depending on the level of simplicity requested on the Ja Vascript front end.

DOM Control

Angular embeds jqlite, a fraction of jQuery, allows DOM manipulation in a cross-browser compatible manner, leaving a V ery small footprint. For extended functionality, JQuery can is loaded with the document.

UI and theming

When the It comes to UI, the Ionic shows its potential. Ionic ' s true beauty is its simplicity. In almost google-like (but isn't android-like) style it uses the existing HTML5 and CSS3 capabilities to deliver fast Experi Ences. The speed was exactly in its simplicity–no unnecessary shadows, rounded corners, gradients but just flat, clean simple, p Owerful, unadulterated HTML5. Ionic doesn ' t promise you native-looking UI, but it does deliver very fast and consistent interface, even on the devices Y OU considered to is slow with rendering HTML5 apps.

Customizable through SASS, Ionic comes with handy variables and mixins to extend for customized appearance. Additionally, it's packaged with its own open sourced icon library featuring-over-icons-chose from.

Widgets

Ionic ' s components is powerfully simple. They is custom HTML elements, as per Angular Directive Principles, but Ionic also provides Controllers to complement Conf Iguration and interaction. While some frameworks could provide more complex widgets, Ionic offers somewhat simpler building blocks so can be combined To deliver rich user interfaces. As of Alpha version, the framework provides with a plethora of form elements, headers and footer bars, buttons, a simple Li St with customizable items, grid elements, and more.

Responsive Design (RWD)

Internally, Ionic leverages responsive Web Design principles to yield optimized experience such as based on screen size or Pixel density. Any app-specific RWD scenarios is welcome and would play very nicely with Ionic.

Desktop Support

Meant for hybrid mobile applications (installable in a mobile device through an App store), Ionic are not meant to being be us Ed for desktop Web apps/sites. While the content would be displayed nicely, it would be optimized to its intended purpose. Those wishing to create apps this fit both environments can stay with Angular JS, but use zurb Foundation, Twitter bootstr AP or similar UI library.

Third party plugins

No Third party plugins or extensions is available at the moment.

Extensibility

Much of extensibility in Ionic would come either from (S) CSS or creating Angular directives and controllers. That makes extensibility a integral part of application development–unavoidable, and not demanding at all. Even the developers new at Ionic and Angular won ' t struggle.

Building Tools

Grunt is used for building Ionic making this #1 JavaScript building tool that much more attractive for your project ' s PURP OSes.

Packaging (native)

Ionic apps would require external tools for packaging purposes. It is tested to work with PHONEGAP, Cordova, and Trigger.io.

Device API

Ionic does not the support device APIs.

Documentation

Ionic ' s documentation is decently complete considering the alpha stage of the framework. Example Rich, the docs show a preview of what's of the components would do on a mobile device. And the preview is very attractive, too.

Angular ' s documentation would satisfy beginner developers, but may soon become insufficient. As the appetites for information grow to expert levels, developers is forced to resort to the source code or elsewhere .

License

Both Ionic and AngularJS are available under the MIT license.

Community

Since It's in a very early stage of life, Ionic still doesn ' t has a mature community. However, given the same circumstance, its popularity are raising faster than for many other (and older) frameworks.

What would they say?

JavaScript Developer:
A refreshing and straight forward the building rich apps no matter the size. The MVC and MVVM patterns is do cum grano salis, as the old Latin would say had they had the opportunity to Wo RK with Angular JS. Additionally, as views is defined using HTML and data models as simple as plain JavaScript objects, the developers would E Asily end up writing less code and use less of the expensive time to produce high quality apps.

Designer:
Passionate designers would love Ionic as it allows them-customize the layout to their liking, without have to modify s Omeone Else ' s complicated widgets and potentially break the app ' s functionality. Customizing the UI may remind of working with Zurb Foundation or Twitter Bootstrap.

Product Manager:
The initial barrier to get started with AngularJS are very low, without needing to know the entire framework in order to BU ILD an easy app. However, beginners faced with more advanced tasks in a complex application would face an increasingly steep learning curve. Also, Angular is built with testing in mind. Make with the IT early in the game.

Keep in mind this Ionic is meant to being used for hybrid apps and not mobile websites.

Ionic + AngularJS