기본 콘텐츠로 건너뛰기

TOP 7 MOBILE APPLICATION HTML5 FRAMEWORKS

source: http://www.gajotres.net/top-7-mobile-application-html5-frameworks/

Last week I wrote an article where I discussed the difference between jQuery Mobile and Sencha Touch. While my previously mentioned article stands on it own I have neglected other available frameworks.
 
Before I continue let me give you a warning. This article will discuss HTML5 frameworks use for hybrid mobile applications. I am not going to talk about front-end frameworks like Bootstrap, this is not the point of this article.
 
Back to topic, admit it or not, jQuery Mobile and Sencha Touch are not center of the mobile world, the truth is far far from it. Mobile market is huge and so is the need for adequate HTML5 frameworks. The main reason for this article is that every single framework I am going to discuss has a completely different approach to architecture and development. Even more, some of them are created for a specific purpose and some are made to be all around Jack of all trades. Few of them don’t require special native wrapper software but most of them do.
 
Intro
 
For those who don’t know, Hybrid App is a combination of native app and mobile web app concepts. Typically the native code is provided by a wrapper framework (like Phonegap) which bridges a gap between native side and a JavaScript API so that the app’s JavaScript code can perform native functions such as taking a picture with the camera.
 
Unlike a classic mobile web app’s, which store source files on a server, hybrid mobile apps store HTML, JavaScript, and CSS files locally (while in same cases it can still be used from a server side) so no Internet access is required.
 
I will try to be as much objective as I can. Let me be transparent first, I am a jQuery Mobile and Sencha Touch developer. I have spent a lot of time playing with available frameworks before I chose those two. This doesn’t mean other frameworks are bad or inadequate, as you will see, my decision was hard and it took time. All of them are great but as Rolling Stones sang “You can’t always get what you want”.
 
Before I start take a look at a list of my chosen 7 in alphabetical order:
 

 
1. Intel App Framework – ex jQMoby
 
Junior
 
This framework is a sleepy beauty. Extremely fast, just like Sencha Touch, this framework is optimized for Android and iOS platform.
 

Pro

 
  • Fast and reliable, probably one of a fastest frameworks of this kind along, outperformed only by Sencha Touch
  • Small and light
  • HTML based, javascript is used to enhance HTML
  • Excellent native wrapper solution, there’s no need to use Phonegap
  • Has MVC support, external MVC framework that can be also used stand alone.

 

Con

 
  • Horrible documentation, mostly compared to other frameworks
  • Limited browser support, which is not that bad, but limits desktop usage.
  • Not made on classic jQuery what ever it old name states. Personally I don’t like misinformation usage to attract developers. This framework is a rewrite Of the JQuery Framework. This may sound good until you find out that some things are missing or not done as expected.
  • It could use better UI, but nothing prevents you from customization. Redesigned in version 2.0 with native themes.

 

Author notes

 
If they ever improved its documentation I would probably switch to this framework. I have already discuss this topic in my other ARTICLE. All in all this is a framework worth of a consideration.
 

Additional info

 
 
2. jQuery Mobile
 
Junior
 
This is most commonly used mobile application HTML5 framework. But don’t let this fool you. It doesn’t mean it is the best solution, most of its publicity comes from it older brother jQuery.
 

Pro

 
  • Most commonly use, which means a lot of 3rd party information
  • Extremely easy to use, HTML bases, just like App Framework
  • Good official documentation, it could be better, according to some information jQM developers are working on making it better.
  • Support every HTML5 browser you can think which makes it good for a desktop and mobile use
  • Excellent theme support
  • Large number of 3rd party plugins

 

Con

 
  • Sluggish on mobile devices, it is not optimized like App Framework or Sencha Touch
  • Average UI, as time passes I hate it more and more, but it can be easily fixed with custom CSS. Without customization every app looks like an clone. iOS GUI look which don’t look good on non iOS platforms.
  • Official documentation is lacking some information, mainly how jQuery Mobile architecture works. While every single component is described in details you will need to brake you head to understood how all of that works together.
  • No out of box MVC support. At the same time is supports Backbone.js and Knockout.js, with some limitations.
  • Sluggish even more when combined with a Phonegap, you really need to have a good understanding of jQuery Mobile architecture to make it work correctly and fast. But if developers don’t change anything soon it will never be fast as App Framework or Sencha Touch.

 

Author notes

 
Currently my favorite framework, mostly because I am a sucker for a jQuery.
 

Additional info

 
 

Reading Material

 
A lot of books are written on jQuery Mobile topic, unfortunately only few are worth mentioning. A In any point I will not recommend books I don’t own.
 
jQuery Mobile Web Development Essentials, Second EditionYet another book from the Packt Publishing, second installment of this series. Originally I have bought first installment of this book which was outdated so you should also be careful. This one is currently 2 months old (26.11.2013) so it should satisfy you in coming months. Second edition is excellent all around book, covering everything from API to working examples. It is also an excellent book if you want to learn everything that needs to be know about jQuery Mobile API (Chapter 10), something event official product web page is lacking.
 
3. jQuery Touch
 
Junior
 
A Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices. Basically it can be used with Zepto.js or jQuery Mobile. Also, it is important to mention, this is not a framework, it was built as a jQuery plugin, and while not it also supports Zepto it is still considered a plugin.
 

Pro

 
  • Fast and easy
  • Excellent theme support
  • HTML based

 

Con

 
  • Supports only web-kit browsers
  • Not that much buzz around it
  • Still in beta after 4 years of development, this does not sound good
  • It is lacking content in compare to other frameworks

 

Author notes

 
While it’s indeed fast I don’t see it in the future.
 

Additional info

 
 
4. Kendo UI
 
Junior
 
I already wrote a detail Kendo UI review + examples, it can be found here:http://www.gajotres.net/html5-frameworks-kendo-ui-from-a-jquery-mobile-perspective/
 
Another jQuery based framework. Unlike previous 3 this one is beautiful, supports MVVM and has its own support for server side communication (.NET, PHP and JAVA). Unfortunately Kendo UI will cost you a few hundred dollars if you want to create a commercial application, it is free in any other case. Excellent template support, every and each template looks and feels like native OS.
 

Pro

 
  • Complete package, framework, UI and MVC all in one.
  • Fast with SVG support, plus fallback support for older browsers
  • HTML based
  • Great documentation (there’s room for the improvement)
  • Native look depending on mobile platform
  • Great template system, themes are native like, depending on platform (iOS, Android …)

 
 

Con

 
  • Commercial license and support
  • Lack of 3rd party support, mainly due commercial license, but you would still be surprised how many developers use this framework

 

Author notes

 
Money is the only reason why I am not using this framework. It is not that I am not willing to pay for it, I just don’t want to use 2 commercial frameworks. What ever happen this is going to be my third framework of choice.
 

Additional info

 
 

Reading Material

 
Several Kendo UI books can be found online, but only two of them, from my experience are worth reading. In any point I will not recommend books I don’t own.
 
Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web APIDo not be discouraged by the title of this book, only one chapter (Chapter 3) is really dedicated to ASP.NET, rest of the book is dedicated to Kendo UI alone, making it also usable to JAVA and PHP developers. It is intended for beguines and expert developers alike. Book covers everything from API, widgets up to working example in form of Movie Ticket Application.
Instant Kendo UI MobileUnlike the previous one this book is dedicated only to Kendo UI Mobile library and its various components for building mobile applications effectively. It is rather short (compared to the previous one). Still it will cover everything you need to know about Kendo UI widgets and page building. One other thing, its price (6.29$) makes it also a bargain.
 
5. Sencha Touch
 
Junior
 
This framework is almost an alien in this jQuery based frameworks sea. It is fast, good looking, supports MVC and has probably best documentation among frameworks mentioned here. Again, like Kendo UI, it has a commercial license + commercial IDE. Unlike jQuery based frameworks (like jQUery Mobile, Kendo UI and PhoneJS) this framework is pure javascript.
 

Pro

 
  • Complete package, framework, UI and MVC all in one.
  • Subjectively fastest mobile application framework there is
  • Best SVG support you can find, usable for game development
  • Perfect documentation
  • Native look depending on mobile platform
  • Excellent in-house native app wrapping / packaging system

 

Con

 
  • Commercial license and support
  • Commercial IDE, you can’t believe how bad it feels to develop in anything else then its IDE
  • Hard to master, unlike previously mentioned frameworks this one is purely javascript based
  • Lack of 3rd party support, mainly due commercial license

 

Author notes

 
My second framework of choice. It is complex but that is why I like it. It requires a lot of time to master, it has a steep learning curve. I wrote a much comprehensive ARTICLE on an topic: jQuery Mobile or Sencha Touch so feel free and take a look if you need more information.
 

Additional info

 
 

Reading Material

 
Several Sencha Touch books can be found online, but only two of them, from my experience are worth reading. In any point I will not recommend books I don’t own.
 
Sencha Touch in ActionSencha Touch in Action is the definitive guide to developing applications with Sencha Touch. This book covers everything you need to know about building Sencha Touch mobile applications. It is intended for experienced developers but it can be also used for initial learning (if your javascript knowledge is satisfactory). There’s another great thing about this book, you can fully preview it / access it online.
 
 
Sencha Touch Cookbook, Second EditionSecond book is intended for beginners and advanced developers. This book is a practical, hands-on guide with easy to follow recipes that provide you with clear, step-by-step instructions. My first real intro into a Sencha Touch world was through this book first edition. It is less about API more about step-by-step instructions, great for developers who lack advanced javascript knowledge.
 
6. Titanium Appcelerator
Junior
 
Another alien here, also this one is not HTML5 framework. It uses similar pure javascript approach like Sencha Touch, but unlike Sencha Touch this one converts javascript to native code.
 

Pro

 
  • Final native code makes it natively fast
  • Can be used for fast prototyping
  • Cross-platform, one code can be used to create iOS, Android and other mobile platform applications

 

Con

 
  • Not that good documentation, can be confusing sometimes
  • Not that much flexible
  • It requires knowledge of native Android / iOS development if you want to get most of it
  • Cross-platform is also has a negative side, complex GUI will require different code for Android, iOS …

 

Author notes

 
Excellent framework made for fast application prototyping. It can become problematic if you need to create a complex cross-platform application. Not to mention it require some knowledge of native Android / iOS development.
 

Additional info

 
 

Reading Material

 
Not that many books were written on topic of Titanium Appcelerator, some time ago, one of framework developers pointed me to a book he called a “Great entry to the Titanium Appcelerator”. A In any point I will not recommend books I don’t own.
 
Appcelerator Titanium Business Application Development CookbookFrom my experience this is best Titanium Appcelerator book if you want to cover everything from the framework API , MVC, REST, Security …. It can be used by beginners and experts alike. Don’t expect a “For dummy’s” book here, Packt Publishing have high standards.
 
7. Zepto.js
Junior
 
One of a first pioneers in this field. Designed to be smaller and faster then jQuery but still similar in its architecture. Unfortunately it is not that much faster then jQuery, I would even go further to say that their performances are similar. Don’t confuse this with jQuery Mobile, while it is not faster then jQuery it is faster the jQuery combined with jQuery Mobile.
 

Pro

 
  • One of a first so lets gave it a point for that
  • Lightweight
  • Smoother and faster then jQuery Mobile but still not fast as other jQuery derivative frameworks
  • If you know jQuery you will know Zepto

 

Con

 
  • Just like App Framework this one lacks some jQuery functionality
  • Slower in a DOM manipulation
  • Doesn’t have a large support for HTML5 browsers like jQuery Mobile, this changed with time but it still don’t support IE

 

Author notes

 
Ok’ish framework but personally it don’t have anything that would give me a reason to switch from jQuery Mobile. It was one of inspirations from App Framework (jqMoby at that point).
 
8. Seven more frameworks
Click on the image, it will lead you to the second part of this article, or find it here.Next 7 articles
 
Framework usage statistic
 
Currently official usage statistic data that will compare these frameworks don’t exist and I don’t think it will ever exist.
 
There’s one indirect way this data can be gathered. As many of you probably know, Stackoverflow (my account) is the flagship site of the Stack Exchange Network, made to be a more open alternative to a forum question sites. Every mentioned framework has a group dedicated to it, each group has a list of question, and each list can be calculated. Idea is to use that data to represent framework usage data.
 
Of course, we need to take this with a grain of salt, a lot of questions can also indicate a complex or buggy framework. All in all this will give as best available statistic of framework usage.
 
  • 1. jQuery Mobile – 13,705
  • 2. Kendo UI – 3024
  • 3. Titanium – 2,397
  • 4. Sencha Touch – 2235 *
  • 5. Zepto – 232
  • 6. jQTouch – 465
  • 7. App Framework – 68 **
 
* – This calculation is based on a sum of two groups: Sencha Touch and Sencha Touch 2. It is only fair to calculate everything. This number would be higher if extjs is included but then we would also need to add a jQuery to jQuery Mobile which brakes the point of this statistic. ** – App Framework statistic is calculated as a sum of a group App Framework and its predecessor jqMoby.
 
Final words
There are several more mobile application HTML5 frameworks worth mentioning but this article came to its end, there was simply no more time to mention them all. Leave me a comment if you think I have forgot to mention something, you don’t agree with something (or strongly agree) of would like to hear about some other framework.

댓글

  1. I’m not sure where you’re getting your information, but good topic. I need to spend some time learning more or understanding more. Thanks for fantastic info I was looking for this information for my mission.
    Mobile App Development Company in Dubai
    Android App Development Company in Dubai
    Mobile App Development Company
    Mobile App Development Company in UAE

    답글삭제
  2. Thank you for taking the time to provide us with your valuable information.
    Web designing classes in chennai

    답글삭제
  3. Such a wonderful article and I feel that it is best to write more on this topic. Thank you so much because i learn a lot of ideas about it. Keep posting...
    Digital Marketing Course In Kolkata

    답글삭제

댓글 쓰기

이 블로그의 인기 게시물

[linux] 뻔하지 않은 파일 퍼미션(file permissions) 끄적임. 정말 속속들이 아니?

1. [특수w]내 명의의 디렉토리라면 제아무리 루트가 만든 파일에 rwxrwxrwx 퍼미션이라 할지라도 맘대로 지울 수 있다. 즉 내 폴더안의 파일은 뭐든 지울 수 있다. 2. [일반rx]하지만 읽기와 쓰기는 other의 권한을 따른다. 3.[일반rwx]단 남의 계정 폴더는 그 폴더의 퍼미션을 따른다. 4.[일반]만약 굳이 sudo로 내 소유로 파일을 넣어놓더라도 달라지는건 없고, 단지 그 폴더의 other퍼미션에 write권한이 있으면 파일을 만들고 삭제할 수 있다. 5.디렉토리의 r권한은 내부의 파일이름 정도만 볼 수있다. 하지만 ls 명령의 경우 소유자, 그룹, 파일크기 등의 정보를 보는 명령어므로 정상적인 실행은 불가능하고, 부분적으로 실행됨. frank@localhost:/export/frankdir$ ls rootdir/ ls: cannot access rootdir/root: 허가 거부 ls: cannot access rootdir/fa: 허가 거부 fa  root #이처럼 속한 파일(폴더)만 딸랑 보여준다. frank@localhost:/export/frankdir$ ls -al rootdir/ # al옵션이 모두 물음표 처리된다.. ls: cannot access rootdir/root: 허가 거부 ls: cannot access rootdir/..: 허가 거부 ls: cannot access rootdir/.: 허가 거부 ls: cannot access rootdir/fa: 허가 거부 합계 0 d????????? ? ? ? ?             ? . d????????? ? ? ? ?             ? .. -????????? ? ? ? ?             ? fa -????????? ? ? ? ?             ? root 하지만 웃긴건, r에는 읽기 기능이 가능하므로 그 폴더 안으로 cd가 되는 x권한이 없더라도 어떤 파일이 있는지 목록 정도는 알 수 있다. 하지만 r이라고

[인코딩] MS949부터 유니코드까지

UHC = Unified Hangul Code = 통합형 한글 코드 = ks_c_5601-1987 이는 MS사가 기존 한글 2,350자밖에 지원하지 않던 KS X 1001이라는 한국 산업 표준 문자세트를 확장해 만든 것으로, 원래 문자세트의 기존 내용은 보존한 상태로 앞뒤에 부족한 부분을 채워넣었다. (따라서 KS X 1001에 대한 하위 호환성을 가짐) 그럼, cp949는 무엇일까? cp949는 본래 코드 페이지(code page)라는 뜻이라 문자세트라 생각하기 십상이지만, 실제로는 인코딩 방식이다. 즉, MS사가 만든 "확장 완성형 한글 ( 공식명칭 ks_c_5601-1987 ) "이라는 문자세트를 인코딩하는 MS사 만의 방식인 셈이다. cp949 인코딩은 표준 인코딩이 아니라, 인터넷 상의 문자 송수신에 사용되지는 않는다. 하지만, "확장 완성형 한글" 자체가 "완성형 한글"에 대한 하위 호환성을 고려해 고안됐듯, cp949는 euc-kr에 대해 (하위) 호환성을 가진다. 즉 cp949는 euc-kr을 포괄한다. 따라서, 윈도우즈에서 작성되어 cp949로 인코딩 되어있는 한글 문서들(txt, jsp 등등)은 사실, euc-kr 인코딩 방식으로 인터넷 전송이 가능하다. 아니, euc-kr로 전송해야만 한다.(UTF-8 인코딩도 있는데 이것은 엄밀히 말해서 한국어 인코딩은 아니고 전세계의 모든 문자들을 한꺼번에 인코딩하는 것이므로 euc-kr이 한국어 문자세트를 인코딩할 수 있는 유일한 방식임은 변하지 않는 사실이다.) 물론 이를 받아보는 사람도 euc-kr로 디코딩을 해야만 문자가 깨지지 않을 것이다. KS X 1001을 인코딩하는 표준 방식은 euc-kr이며 인터넷 상에서 사용 가능하며, 또한 인터넷상에서 문자를 송수신할때만 사용.(로컬하드에 저장하는데 사용하는 인코딩방식으로는 쓰이지 않는 듯하나, *nix계열의 운영체제에서는 LANG을 euc-kr로 설정 가능하기도 한걸

[hooking, 후킹, 훅킹] Hooking이란?

source: http://jinhokwon.blogspot.kr/2013/01/hooking.html Hooking 이란? [출처] http://blog.daum.net/guyya/2444691 훅킹(Hooking)이란 이미 작성되어 있는 코드의 특정 지점을 가로채서 동작 방식에 변화를 주는 일체의 기술 이다. 훅이란 낚시바늘같은 갈고리 모양을 가지는데 여기서는 코드의 중간 부분을 낚아채는 도구라는 뜻으로 사용된다. 대상 코드의 소스를 수정하지 않고 원하는 동작을 하도록 해야 하므로 기술적으로 어렵기도 하고 운영체제의 통상적인 실행 흐름을 조작해야 하므로 때로는 위험하기도 하다. 훅킹을 하는 방법에는 여러 가지가 있는데 과거 도스 시절에 흔히 사용하던 인터럽터 가로채기 기법이나 바로 앞에서 알아본 서브클래싱도 훅킹 기법의 하나라고 할 수 있다. 이외에도 미리 약속된 레지스트리 위치에 훅 DLL의 이름을 적어 주거나 BHO(Browser Helper Object)나 응용 프로그램 고유의 추가 DLL(Add in)을 등록하는 간단한 방법도 있고 PE 파일의 임포트 함수 테이블을 자신의 함수로 변경하기, CreateRemoteThread 함수로 다른 프로세스의 주소 공간에 DLL을 주입(Injection)하는 방법, 메모리의 표준 함수 주소를 덮어 쓰는 꽤 어려운 방법들도 있다. 이런 고급 훅킹 기술은 이 책의 범위를 벗어나므로 여기서는 소개만 하고 다루지는 않기로 한다. 이 절에서 알아볼 메시지 훅은 윈도우로 전달되는 메시지를 가로채는 기법으로 다양한 훅킹 방법중의 하나이다. 메시지 기반의 윈도우즈에서는 운영체제와 응용 프로그램, 또는 응용 프로그램 사이나 응용 프로그램 내부의 컨트롤끼리도 많은 메시지들을 주고 받는다. 훅(Hook)이란 메시지가 목표 윈도우로 전달되기 전에 메시지를 가로채는 특수한 프로시저이다. 오고 가는 메시지를 감시하기 위한 일종의 덫(Trap)인 셈인데 일단 응용 프로그램이 훅 프로시저를 설치하면 메시지가 윈도우로 보내지기