Ionic Framework

Ionic framework is the youngest in our top 5 stack, 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 Ionic UI.

Ionic provides a set of Angular directives (custom HTML elements) for it’s own components, making it as easy to use the widgets 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 are keeping their (and ours) options open with plans to support other frameworks such as Knockout or EmberJS. This particular review is strongly influenced by AngularJS and it doesn’t vouch for the accuracy with other frameworks when Ionic support emerges.

MV* Pattern

Angular JS used to be 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 are object oriented JavaScript frameworks so they don’t make use of a class system. This can (but shouldn’t) be observed as a weakness or a strength, depending on the level of simplicity requested on the JavaScript front end.

DOM control

Angular embeds jqLite, a fraction of jQuery that allows DOM manipulation in a cross-browser compatible manner, leaving a very small footprint. For extended functionality, jQuery can be loaded with the document.

UI and Theming

When it comes to UI, Ionic shows its potential. Ionic’s true beauty is its simplicity. In almost Google-like (but not Android-like) style it uses the existing HTML5 and CSS3 capabilities to deliver fast experiences. The speed is exactly in its simplicity – no unnecessary shadows, rounded corners, gradients but just flat, clean simple, powerful, unadulterated HTML5. Ionic doesn’t promise you native-looking UI, but it does deliver very fast and consistent interface, even on the devices you considered to be 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 440 icons to chose from.

Widgets

Ionic’s components are powerfully simple. They are custom HTML elements, as per Angular directive principles, but Ionic also provides Controllers to complement configuration and interaction. While some frameworks may provide more complex widgets, Ionic offers somewhat simpler building blocks that can be combined to deliver rich user interfaces. As of alpha version, the framework provides with a plethora of form elements, header and footer bars, buttons, a simple list 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 are welcome and will play very nicely with Ionic.

Desktop support

Meant for hybrid mobile applications (installable on a mobile device through an app store), Ionic is not meant to be be used for desktop web apps/sites. While the content will be displayed nicely, it will be optimized for its intended purpose. Those wishing to create apps that fit both environments can stay with Angular JS, but use Zurb Foundation, Twitter Bootstrap or similar UI library.

Third party plugins

No third party plugins or extensions are available at the moment.

Extensibility

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

Building tools

Grunt is used for building Ionic making that #1 JavaScript building tool that much more attractive for your project’s purposes.

Packaging (native)

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

Device API

Ionic does not 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 most of components will do on a mobile device. And the preview is very attractive, too.

Angular’s documentation will satisfy beginner developers, but may soon become insufficient. As the appetites for information grow to expert levels, developers may be 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 have a mature community. However, given the same circumstance, its popularity is raising faster than for many other (and older) frameworks.

What would they say?

JavaScript developer:
A refreshing and straight forward way of building rich apps no matter the size. The MVC and MVVM patterns are done cum grano salis,
as the old latin would say had they had the opportunity to work with
Angular JS. Additionally, as views are defined using HTML and data
models as simple as plain JavaScript objects, the developers will easily
end up writing less code and use less of the expensive time to produce
high quality apps.

Designer:
Passionate designers will love Ionic as it allows them to customize the
layout to their liking, without having to modify someone 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 is very low, without
needing to know the entire framework in order to build an easy app.
However, beginners faced with more advanced tasks in a complex
application will face an increasingly steep learning curve. Also,
Angular is built with testing in mind. Make use of it early in the game.

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

Ionic + AngularJS的更多相关文章

  1. Cordova Ionic AngularJS

    实践分享:开始用Cordova+Ionic+AngularJS开发App http://www.cocoachina.com/webapp/20150707/12395.html

  2. Ionic/Angularjs 知识点解析

    Ionic/Angularjs 知识点解析 angular-ui-router(状态跳转) state的定义:(在app.js的config下配置) $stateProvider .state('ap ...

  3. 【Ionic+AngularJS 开发】之『个人日常管理』App(一)

      写在前面的话 过去一年自己接触了不少手机前端开发,得益于现在手机性能的提升和4G普及,感觉使用混合技术开发手机App已经可以满足越来越多的应用场景了.新年伊始,对自己2016年所学知识做一个阶段性 ...

  4. WebApp开发框架Ionic+AngularJS+Cordova

    目前的手机APP有三类:原生APP.WebAPP.HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用 ...

  5. 【Ionic+AngularJS 开发】之『个人日常管理』App(二)

    准备工作 资源 预装工具 安装bower npm install -g bower 安装ngCordova bower install ngCordova (*由于网络获取资源的原因,后面几次建项目后 ...

  6. HybridAPP开发框架Ionic+AngularJS+Cordova搭建

    Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用的用户界面框架,它自称为是"本地与HTML5的结合".该框架提供了很多基本的移动用户界面范例,例如像列表(lis ...

  7. Ionic+AngularJS 开发的页面在微信公众号下显示不出来原因查究

    ionic 页面 微信浏览器遇到的坑 公司的微信公众号一部分页面是用AngularJS+Ioinc开发,发现在本地浏览器测试的时候都没问题,传到服务器在微信公众号下跑就出问题来,经查是: index- ...

  8. 实践分享:开始用Cordova+Ionic+AngularJS开发App

    http://www.cocoachina.com/webapp/20150707/12395.html 本文是一篇关于我本人在使用Cordova+Ionic以及AngularJS开发移动App的过程 ...

  9. ionic+angularjs开发hybrid App(环境配置+创建测试项目)

    本文使用的系统是win10 因为后期需要使用nodejs 所以先把node装好 https://nodejs.org/download/ 下载JDK并配置Java运行环境 http://www.ora ...

随机推荐

  1. python之路三

    集合 set拥有类似dict的特点:可以用{}花括号来定义:其中的元素没有序列,也就是是非序列类型的数据;而且,set中的元素不可重复,这就类似dict的键. set也有继承了一点list的特点:如可 ...

  2. this a a mark down test

    *** this is title ''' code '''

  3. NameError: name 'sys_platform' is not defined

    pip install --upgrade distribute

  4. 深入解析PHP中的(伪)多线程与多进程

    本篇文章是对PHP中的(伪)多线程与多进程进行了详细的分析介绍,需要的朋友参考下 (伪)多线程:借助外力利用WEB服务器本身的多线程来处理,从WEB服务器多次调用我们需要实现多线程的程序.QUOTE: ...

  5. .NET LINQ 限定符操作

    限定符操作      限定符运算返回一个 Boolean 值,该值指示序列中是否有一些元素满足条件或是否所有元素都满足条件. 方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表 ...

  6. 51. N-Queens

    题目: The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two que ...

  7. 读取properties文件方式

    //src目录下 static Properties pro = new Properties(); //jar包时用(ide也可以) // pro.load(Tool.class.getClassL ...

  8. (转)Oracle 获取上周一到周末日期的查询sql语句

    -- Oracle 取上周一到周末的sql -- 这样取的是 在一周内第几天,是以周日为开始的 select to_char(to_date('20130906','yyyymmdd'),'d') f ...

  9. PHP表单与验证

    一.Header()函数 标头 (header) 是服务器以 HTTP 协议传 HTML 资料到浏览器前所送出的字符串,在标头与 HTML 文件之间尚需空一行分隔. /*一.Header()函数 */ ...

  10. thinkphp全站静态页实现方法!

    1:在根目录下的全局index.php中加下面这行: define('HTML_PATH', './htm');//生成静态页面的文件位置 2:在项目的配置文件config.php中加下面这行: 'H ...