{"id":3036,"date":"2011-10-05T20:18:58","date_gmt":"2011-10-05T12:18:58","guid":{"rendered":"http:\/\/inhaoxu.com\/blog\/?p=3036"},"modified":"2011-10-05T20:18:58","modified_gmt":"2011-10-05T12:18:58","slug":"top-10-mobile-web-development-javascript-frameworks","status":"publish","type":"post","link":"https:\/\/inhaoxu.com\/blog\/?p=3036","title":{"rendered":"Top 10 Mobile Web Development JavaScript Frameworks"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cdn.sixrevisions.com\/0180-01_javascript_mobile_frameworks_thumbnail.jpg\" alt=\"Top 10 Mobile\u00a0Web Development JavaScript Frameworks\" width=\"550\" height=\"200\" \/><\/p>\n<p>Creating web apps and sites for the\u00a0Mobile Web\u00a0has its own sets of challenges and techniques. From UIs optimized for fingers instead of mouse cursors to the bandwidth limitations that most portable personal devices have, developing for mobile devices requires a paradigm shift for those of us who\u2019ve traditionally created products aimed at desktops.<\/p>\n<p>To help you rapidly deploy cross-platform mobile apps and websites, there\u2019s a wide range of JavaScript frameworks you can take advantage of.<\/p>\n<p>&nbsp;<\/p>\n<p>Some common characteristics of JavaScript mobile web development frameworks:<\/p>\n<ul>\n<li><strong>Optimized for touchscreen devices:<\/strong>\u00a0Fingers as input devices instead of mouse cursors provide an extra set of challenges in user interface design. Mobile web development frameworks provide standard UI elements and event-handling specifically for mobile device platforms.<\/li>\n<li><strong>Cross-platform:<\/strong>\u00a0Support for multiple mobile device platforms such iOS and Android allows you to get your app to a wide range of users.<\/li>\n<li><strong>Lightweight:<\/strong>\u00a0Because of current bandwidth limitations, a stronger emphasis on lowering file weight is placed into mobile web development frameworks.<\/li>\n<li><strong>Uses HTML5 and CSS3 standards:<\/strong>\u00a0Most mainstream mobile devices have web browsers that support HTML5 and CSS3, and so mobile web development frameworks take advantage of new features available in these upcoming W3C specifications for a better user experience.<\/li>\n<\/ul>\n<p>In this article, you\u2019ll find my top picks of JavaScript mobile web development frameworks you should consider using to build your next mobile web app or website.<\/p>\n<h3>1.\u00a0jQuery Mobile<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cdn.sixrevisions.com\/0180-02_jquery_mobile.jpg\" alt=\"jQuery\u00a0Mobile\" width=\"550\" height=\"265\" \/><\/p>\n<p>jQuery Mobile, a framework that will help you rapidly and confidently develop mobile app user interfaces across popular mobile device platforms like iOS and Android, is perhaps the most popular project out there.<\/p>\n<p>The framework boasts a lightweight code base (weighing in at 20KB when minified and gzipped) and a huge bevy of standard user interface elements that mobile device users are accustomed to, such as switches and sliders.<\/p>\n<p>See jQuery Mobile in action by going to its\u00a0demo page\u00a0(it doubles as the framework\u2019s official documentation).<\/p>\n<p>If\u00a0jQuery\u00a0isn\u2019t your thing, check out\u00a0MooTools Mobile, a MooTools plugin by MooTools core developer Christoph Pojer and\u00a0Dojo Mobile, which leverages the Dojo API to help developers rapidly build apps for mobile platforms.<\/p>\n<h3>2.\u00a0Titanium Mobile<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cdn.sixrevisions.com\/0180-03_titanium_mobile.jpg\" alt=\"Titanium Mobile\" width=\"550\" height=\"265\" \/><\/p>\n<p>This powerful and robust mobile web development framework allows you to use your existing HTML, CSS and JavaScript knowledge to make native-like mobile apps for iOS and Android.<\/p>\n<p>As one of the bigger mobile web development frameworks out there \u2014 with over 300 APIs and an active developer community \u2014 you know you\u2019ll often find help and support from peer developers.<\/p>\n<p>Titanium Mobile supports native UI elements for iOS and Android like table views, tabs, switches and popovers. It also has features that enable you to interact with the mobile devices\u2019 camera and native file storage system.<\/p>\n<h3>3.\u00a0The-M-Project<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cdn.sixrevisions.com\/0180-04_the_m_project.jpg\" alt=\"The-M-Project\" width=\"550\" height=\"265\" \/><\/p>\n<p>The-M-Project is another solid JavaScript framework that takes advantage of new HTML5 features for easier and better mobile app development.<\/p>\n<p>The framework follows the popular model-view-controller (MVC) software architecture pattern, which is a huge selling point for many developers.<\/p>\n<p>It has offline support so that your users can continue working without an Internet connection (they can then sync up to the server next time they\u2019re online) and excellent documentation (the project has a\u00a0Getting Started\u00a0guide for new users of the project).<\/p>\n<p>To witness The-M-Project in action, check out\u00a0their showcase, which includes items like the\u00a0ToDo App\u00a0and\u00a0KitchenSink\u00a0(a showcase of all the UI elements included in the framework).<\/p>\n<h3>4.\u00a0Jo<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cdn.sixrevisions.com\/0180-05_jo.png\" alt=\"Jo\" width=\"550\" height=\"265\" \/><\/p>\n<p>Jo is a framework aimed at developers working on HTML5-capable mobile devices such as those the use the iOS, webOS, Android and Chrome OS platforms.<\/p>\n<p>It has standard, native-like UI elements such as the web form widget for your login screens and the popup widget that you can use for providing extra information when a user clicks on an interface element.<\/p>\n<p>See the\u00a0demo page\u00a0on their site, which includes a screencast displaying Jo in action on multiple devices and mobile platforms.<\/p>\n<h3>5.\u00a0xui.js<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cdn.sixrevisions.com\/0180-06_xui_js.png\" alt=\"xui.js\" width=\"550\" height=\"265\" \/><\/p>\n<p>If you need something super lightweight and you only need features for standard client-side development tasks such as DOM manipulation, event-handling,\u00a0Ajax\u00a0and a few animation effects, check out xui.js. xui.js packs a punch in such a tiny package (4.2 KB when gzipped).<\/p>\n<p>xui.js provides targeted builds for specific mobile browsers such as WebKit and IE mobile for when you\u2019re developing apps strictly towards a particular mobile device operating system.<\/p>\n<h3>6.\u00a0EmbedJS<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cdn.sixrevisions.com\/0180-07_embedjs.jpg\" alt=\"EmbedJS\" width=\"550\" height=\"265\" \/><\/p>\n<p>EmbedJS is a JavaScript framework for embedded devices (which includes mobile phones, TVs, tablets and so forth).<\/p>\n<p>What\u2019s great about EmbedJS is that it has multiple builds for specific platforms and browsers such as iOS, Firefox, Android, etc., which translates to an optimal user experience and less code to serve to your users. And if you\u2019d like to customize your build, the creators provide you with the\u00a0EmbedJS Build tool.<\/p>\n<p>EmbedJS is based on Dojo, so if you\u2019re familiar with the Dojo API syntax, you\u2019ll be able to use EmbedJS right away.<\/p>\n<h3>7.\u00a0zepto.js<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cdn.sixrevisions.com\/0180-08_zepto_js.jpg\" alt=\"zepto.js\" width=\"550\" height=\"265\" \/><\/p>\n<p>zepto.js is a mobile JavaScript framework built specifically for mobile WebKit browsers (e.g. Safari and Chrome). It prides itself in its minimalist development philosophy, which translates to simplicity for helping developers get stuff done quickly. What\u2019s more is that this JS framework is ultra-lightweight at only 5KB.<\/p>\n<p>The zepto.js syntax borrows from, and is compatible with, jQuery \u2014 a welcome plus for many developers.<\/p>\n<p>To learn more about this framework, see developer Thomas Fuchs\u2019\u00a0presentation of zepto.js.<\/p>\n<h3>8.\u00a0DHTMLX Touch<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cdn.sixrevisions.com\/0180-09_dhtmlx_touch.jpg\" alt=\"DHTMLX Touch\" width=\"550\" height=\"265\" \/><\/p>\n<p>DHTMLX Touch, a free HTML5\/JavaScript framework optimized for touchscreen devices, brings you the ability to craft beautiful mobile web apps quickly.<\/p>\n<p>The\u00a0DHTMLX Touch UI Designer\u00a0is a visual editor for building mobile user interfaces, and it\u2019ll help you construct top-notch UIs with minimal coding.<\/p>\n<p>Check out\u00a0samples\u00a0of DHTMLX Touch in action, which includes a\u00a0menu app for the iPad(perfect for restaurants) and Book Shop (a proof-of-concept demo for an e-store offering books).<\/p>\n<h3>9.\u00a0Mobilize.js<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cdn.sixrevisions.com\/0180-10_mobilize_js.png\" alt=\"Mobilize.js\" width=\"550\" height=\"265\" \/><\/p>\n<p>Mobilize.js is a JavaScript framework for porting your existing website to a mobile-friendly version. It\u2019s easy to integrate into your site because it does everything on the client-side, and has facilities for detecting mobile browsers so that you can serve them the mobile version of the site.<\/p>\n<p>WordPress\u00a0users might want to check out the\u00a0Mobilize.js WordPress plugin.<\/p>\n<h3>10.\u00a0ChocolateChip Mobile<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cdn.sixrevisions.com\/0180-11_chocolatechip_mobile.jpg\" alt=\"ChocolateChip Mobile\" width=\"550\" height=\"265\" \/><\/p>\n<p>ChocolateChip Mobile is a JavaScript framework developed towards future-forward web browsers. It shares syntax similar to jQuery or Prototype.<\/p>\n<p>The resemblance to jQuery doesn\u2019t stop at the syntax \u2014 for example, like jQuery, it can handle events through binding and delegation, and has methods such as\u00a0<code>.css<\/code>\u00a0and<code>.toggleClass<\/code>.<\/p>\n<p>You can grab ChocolateChip Mobile\u2019s\u00a0source code off GitHub.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating web apps an&hellip;  <a href=\"https:\/\/inhaoxu.com\/blog\/?p=3036\" class=\"more-link\">more <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1405],"tags":[1607,1609,1608,1456,304],"_links":{"self":[{"href":"https:\/\/inhaoxu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3036"}],"collection":[{"href":"https:\/\/inhaoxu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inhaoxu.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inhaoxu.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inhaoxu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3036"}],"version-history":[{"count":0,"href":"https:\/\/inhaoxu.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3036\/revisions"}],"wp:attachment":[{"href":"https:\/\/inhaoxu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inhaoxu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inhaoxu.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}