Develop HTML5 apps using Backbone.js, Zepto.js, and Trigger.io

in order to run fast and respond quickly, we recommend the use of Backbone.js and zepto.js. To make this process more interesting, we developed a small sample project that uses CSS to reset styles, Backbone.js, and several pages with transition effects. Our project will display trigger Twitter updates and individual tweet messages. As always, we'll use the same HTML5 code base to create Android and iOS apps. In this process, We'll show you how to: Add your JavaScript files to your application using Backbone.js to display responsive interfaces using CSS reset styles to reduce cross-platform inconsistencies implement sample transitions between views in your application you can develop your own projects on this basis -This is a good foundation for developing new projects! Put the code on GitHub, see: https://Github.com/trigger-corp/forge-bootstrap. added file Backbone.js, responsible for processing history, user actions, and framing structure html5boilerplate for the entire JavaScript, designed to reduce the impact of inconsistent rendering defaults on different platforms Zepto This lightweight framework for mobile devices is an alternative to jquery that can be used for DOM (Document Object model) processing. Get started with javascripts and CSS in your app, just add them to your index.html, just like you do in a regular website:<link rel="stylesheet"href="Css/reset.css"><link rel="stylesheet"href="Css/demo.css"><script type="Text/javascript"Src="Js/lib/zepto.min.js"></script><script type="Text/javascript"Src="Js/lib/underscore-min.js"></script><script type="Text/javascript"Src="Js/lib/backbone-min.js"></script><script type="Text/javascript"Src="Js/demo.js"></script&in GT, we only used the HTML5 template reset Style (RESET.CSS), JavaScript Library, and our own two files: Demo.css and Demo.js. When using backbone, your entry point should set all the aspects that your application needs to run properly, and then start running the backbone history system. For example, in this project, we use $ (demo.init) to run the following functions at application startup, running only once://when the application starts, it is called only onceinit:function () {//get trigger Twitter update contentforge.request.ajax ({URL:"Https://twitter.com/statuses/user_timeline/14972793.json", DataType:"JSON", success:showindex}); //once we have the trigger Twitter update, we callfunction Showindex (data) {//Save the initial data.Demo.items =NewDemo.Collections.Items (data); //Establish BackboneDemo.router =NewDemo.router ();     Backbone.history.start (); Here, we use the Request.ajax function to retrieve our tweet messages, store the data in a collection, and then start running backbone. Use Backbone.jsBackbone.history.start () to start the backbone Window.onhashchange event subscription. When a fragment of a URL changes, the route defined in Routes.js is used: routes: {"":"Index",//entry point: no hash shard or #    "item/:item_id":"Item"  //#item/idThe route maps the URL to the function. We define two routes here: one corresponds to #index (), the other corresponds to the #item/[item_id]. The item_id is then passed as a parameter to item (). Routing is responsible for arranging URLs for your entire application. It's a good idea to use backbone to manage the views inside the Forge application: not only do we build URLs in the history stack (for example, this means that the "back" button works as expected on the Android table), we also have full control over what is displayed in the application, You don't have to use slowly's page loading mechanism. However, especially on mobile platforms, your users expect to switch from one view to the next with some kind of dynamic transition effect, so you can organize the backbone view into a page. Page view the snippet shows how we implement the page in this project, and when a page becomes active, the animated transition effect is used. You can also see here that we use Zepto for DOM processing. Demo.Views.Page=Backbone.View.extend ({className:"page", Initialize:function () { This. render (); }, Show:function () {$ ('. Page'). CSS ({"position":"Absolute"}); varDirection_coefficient = This. options.back?1: -1; if($('. Page'). length) {var$old = $ ('. Page'). Not ( This. EL); //This solution is hard to come by-//just using the. CSS (property, ') doesn't work! $old.Get(0). style["Margin-left"] =""$old.Get(0). style["-webkit-transform"] =""              This. $el. AppendTo ('Body'). Hide ();  This. $el. Show (). CSS ({"Margin-left": the*direction_coefficient});  This. $el. Anim ({translate3d:- the* Direction_coefficient +'px,0,0'},                 0.3,'Linear'); $old. Anim ({translate3d:- the* Direction_coefficient +'px,0,0'},                 0.3,'Linear', function () {$old. Remove (); $('. Page'). CSS ({"position":"Static"});         }); } Else {              This. $el. AppendTo ('Body'). Hide ();  This. $el. Show (); } Window.scrollto (0,0); } }); If you want, you can implement this page in your own view and use the show () method to switch from one page to another. For example, in this project, we created a page for the initial view of all the tweets, and a page for it when the user selects each individual tweet message. Using the other parts of the Forge API we have seen the use of Forge.request.ajax to request a remote server. The project also takes full advantage of some other forge APIs. In Expand_item (), we use Forge.tabs.open () to open a new tab for external pages in a cross-platform way. The description of open () is documented here. Finally, we used the forge in the Click_or_tap () function. isSo that we can monitor the touch events on the mobile device (tapEvent), as well as click events on other devices (clickEvent). An easy-to-detect platform is documented here. Click_or_tap:function (obj) {//for object properties, add "tap" to the attribute and use the original value    varNew_obj = {};  for(varPropertyinchobj) {         if(Obj.hasownproperty (property)) {if(Forge. is. Mobile ()) {new_obj["Tap"+ Property] =Obj[property]; }             Else{new_obj["Click"+ Property] =Obj[property]; }         }     }     returnNew_obj} This is important because the response to the Click event is not as fast as a touch on the mobile device. Build and run the application to build and run the application yourself, please first register on our website (https://trigger.io/); If you have not yet trigger.io the Forge framework, install the framework and start building the forge environment (see http://docs.trigger.io/en/v1.3/forge/index.html). then, create a new directory for your application, use the CD command to go to the directory, run the "Forgecreate-N Demo "To create a demo (demo) application in your account. Copy the tutorial code into the SRC directory, overwriting the boilerplate code created before forge. Run Forge build, build each version of the application (this step is slow for the first time--but the subsequent build process is lightning fast!). Running Forge run Android or Forge run iOS, view the app (you'll need to install the Android emulator or iphone simulator first--For more information, please refer to our Documentation: http://docs.trigger.io/en/v1.3/android/getting-started.html). If you're connected to an Android phone, Forge run Android will deploy the app to your phone for testing (make sure the USB debug mode is turned on). Enjoy it! That's it. You can handle the source code arbitrarily. We hope everything is clear. 

Develop HTML5 apps using Backbone.js, Zepto.js, and Trigger.io