In the ever-evolving world that is mobile (web) development, it can feel as if it’s impossible to decide on a framework to use in building your app. Having spent the last 7 years or so in app development, trust me, I feel your pain.
Recently I tested out several frameworks. Some were open source, some closed. They all solved similar problems and were generally easy to use. What I took away from this was that there’s a lot of great work being done, but nobody has an all encompassing solution that works for every scenario, and that’s okay.
Frameworks are tools for us developers to utilize. They’re not magical cauldrons that you dump code into to spawn a killer app that works on every device, form factor, and screen size. That said, there are a handful of frameworks that make the development process much easier and more intuitive.
Over the next three weeks we’ll take you on a high-level tour of the frameworks my team tested out, and how we found their overall performance on device.
Let’s take a look at a couple of my favourites, which are both powered by Angular.js.
Ionic Framework is an “open source front-end SDK for developing amazing mobile apps with web technologies” running on AngularJS. It’s my favourite to use, and has an enormous community of developers.
Cost
- FREE
- MIT Licensed
Cross Platform Support
- BlackBerry 10
- iOS 7+
- Android 4.1+
- Windows Phone
Note: While Ionic does not list BlackBerry 10 as an officially supported platform, it does indeed run quite well on our device(s).
Popularity
Arguably one of the most popular (modern) frameworks available. It’s very well funded, and actively maintained.
- ~2.5M in funding
- 18,000+ Stars on GitHub
- 2,800+ Forks on GitHub
Age / Maturity
- 2+ Years old
- Lengthy history on GitHub
- Extends AngularJS which is very well established
Ability to Theme
- Yes, via CSS, SASS, LESS, etc.
- Various out-of-the-box colour schemes for components to choose from
Ability to Scale
- Scales well on phones, and tablets.
- Lots of potential white-space on wider-screens (Desktop)
- Flex based layouts
File Size
- ~120K for the core
- ~400K bundled with Icons
Over-all Performance
- Page transitions
- Good
- Performance
- Good
- List View Scrolling
- Good (when native scrolling enabled)
- Touch Responsiveness
- Good
Support
WYSIWYG
Cordova Compatibility
- Yes
- Can be extended with ngCordova
Diversity of modules / components / widgets
- Countless modules
- All the standard web components out-of-the-box
- Lists, Cards, Headers, Buttons, Inputs, etc.
- AngularJS based. Can make use of nearly any third-party directives, and modules.
Larger Screen Support (Desktop / Tablet)
- Yes
- Meant for mobile, but does work on desktop
Localization
- i18n (Internationalization)
- l10n (Localization)
Angular Material is an “implementation of Material Design in AngularJS”. It provides a set of reusable UI components based on the Material Design system.
Cost
- FREE
- MIT Licensed
Cross Platform Support
- BlackBerry 10
- iOS
- Android
- Windows Phone
Note: While Angular Material does not list BlackBerry 10 as an officially supported platform, it does indeed run quite well on our device(s).
Popularity
Angular Material is a newer framework, but is quickly gaining steam.
- Google Product
- 9,400+ Stars on GitHub
- 1500+ Forks on GitHub
Age / Maturity
- 1 Years old
- Very actively developed
- Extends AngularJS which is very well established
Ability to Theme
- Yes, via CSS, SASS, LESS, etc.
- Can be themed, but you should respect the Material Design pattern
Ability to Scale
- Scales well on phones, and tablets, and desktop
- Flex based layouts
File Size
- ~500K
Over-all Performance
- Page transitions
- Not included. Must implement yourself for now.
- Performance left more to be desired when added
- Performance
- Good
- List View Scrolling
- Great
- Best list-view performance I’ve seen to date. Period.
- Touch Responsiveness
- Great
Support
WYSIWYG
- No “creator” utility
- What you see in the browser while building, is what you get on device
Cordova Compatibility
- Yes
- Can be extended with ngCordova
Diversity of modules / components / widgets
- Countless modules
- All the standard web components out-of-the-box
- Lists, Cards, Headers, Buttons, Inputs, etc.
- AngularJS based. Can make use of nearly any third-party directives, and modules.
- Many third-party directives/modules don’t follow “Material Design” principals, so may be harder to find what you’re looking for in that regard.
Larger Screen Support (Desktop / Tablet)
- Works well on all form factors
- Content layouts re-adjust very intelligently
Localization
- i18n (Internationalization)
- l10n (Localization)
As you can see, both Ionic and Angular Material are both rated (by me) quite well. I had a hard time choosing between the two. In the end, for me, it came down to maturity of the framework which is why I prefer to use Ionic for the time being.
Are you using Ionic, or Angular Material? Agree/disagree with me? Let me know what you think (@chadtatro), on Twitter!
Lastly, stay tuned for next weeks post by Naveenan who will be covering Sencha Touch, and jQuery Mobile.
