Getting Started with javascript-based Mobile Web cms--a Brief Introduction

<span id="Label3"></p><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">See the mobile Framework on the project, search the Internet for a moment, found that the original Has.</p></p><p><p>so, I found a demo sample to start building a mobile platform of the Cms---ink Qi CMS, to facilitate the project in-depth understanding of the same time. can also maintain a CMS system on its own.</p></p>Building a framework<p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">Tried to use Angularjs and emberjs. The basic problem with using ANGLUARJS and Emberjs is that it's not easy to introduce what you're familiar With. And considering that Google has always been very supportive of its projects, it has given up the idea of angluarjs.</p></p><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">So I started looking for some solutions, but finally chose a more general Scheme.</p></p> <ol> <ol> <li style="margin:0px; padding:1px 0px; border:0px; font-weight:inherit; font-style:inherit; font-size:14px!i mportant; font-family:inherit; vertical-align:baseline; list-style-type:disc; ">requirejs </li> <li style="margin:0px; padding:1px 0px; border:0px; font-weight:inherit; font-style:inherit; font-size:14px!important; font-family:inherit; vertical-align:baseline; list-style-type:disc; ">jquery </li> <li style="margin:0px; padding:1px 0px; border:0px; font-weight:inherit; font-style:inherit; font-size:14px!important; font-family:inherit; vertical-align:baseline; list-style-type:disc; ">underscore </li> <li style="margin:0px; padding:1px 0px; border:0px; font-weight:inherit; font-style:inherit; font-size:14px!important; font-family:inherit; vertical-align:baseline; list-style-type:disc; ">backbone </li> </ol> </ol><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">Compared to angularjs, backbone is a lightweight scheme, in terms of size. For MYSELF. Flexibility is a good thing, that is, you can arbitrarily add a lot of things.</p></p>About backbone <blockquote style="margin: 0px; padding: 0px 0px 0px 1em; border-width: 0px 0px 0px 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); font-size: 11px; font-family: Arial, sans-serif; vertical-align: baseline; quotes: ‘‘; color: rgb(119, 119, 119); line-height: 18px;"> <blockquote style="margin: 0px; padding: 0px 0px 0px 1em; border-width: 0px 0px 0px 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); font-size: 11px; font-family: Arial, sans-serif; vertical-align: baseline; quotes: ‘‘; color: rgb(119, 119, 119); line-height: 18px;"> <p style="border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">Backbone.js is a set of JavaScript frameworks and application interfaces for restful Json. It is also a set of programming paradigms that are broadly in line with the MVC Architecture. The backbone.js features a light weight. You can do this simply by relying on a set of JavaScript libraries.</p> </blockquote> </blockquote><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">The detailed function should be</p></p> <ol> <li style="margin: 0px; padding: 1px 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 14px !important; font-family: inherit; vertical-align: baseline; list-style-type: disc;"><li style="margin: 0px; padding: 1px 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 14px !important; font-family: inherit; vertical-align: baseline; list-style-type: disc;">Backbone is lightweight, supports jquery, and comes with Routing. An object-based view, a powerful sync mechanism that reduces page size and thus accelerates page display.</li></li> <li style="margin: 0px; padding: 1px 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 14px !important; font-family: inherit; vertical-align: baseline; list-style-type: disc;"><li style="margin: 0px; padding: 1px 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 14px !important; font-family: inherit; vertical-align: baseline; list-style-type: disc;">jquery jquery makes it easier for users to work with HTML (an application under the standard Universal Markup language), events, animate, and easily provide Ajax interaction for the Site. Only the main is jquery can make the User's HTML page keep the code and HTML content separated, just need to define the ID.</li></li> <li style="margin: 0px; padding: 1px 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 14px !important; font-family: inherit; vertical-align: baseline; list-style-type: disc;"><li style="margin: 0px; padding: 1px 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 14px !important; font-family: inherit; vertical-align: baseline; list-style-type: disc;">Underscore is Backbone's dependent library underscore is a JavaScript useful library that provides some features similar to prototype.js, but does not inherit whatever JavaScript built-in Objects.<p></p><p></p></li></li> <li style="margin: 0px; padding: 1px 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 14px !important; font-family: inherit; vertical-align: baseline; list-style-type: disc;"><li style="margin: 0px; padding: 1px 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 14px !important; font-family: inherit; vertical-align: baseline; list-style-type: disc;">Requirejs you are able to read sequentially requires only dependent Modules.</li></li> </ol><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">Front-End ui, using pure css, a lightweight CSS framework, but finally feel that the whole is used Together. The size is still Quite. Just be able to have a better mobile experience.</p></p><p><p></p></p>Other replaceable frames<p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"></p></p> <ol> <ol> <li><strong>AngularJS</strong>. Taking into account certain factors, may replace the backbone, but is not the current feasible Solution.<p></p><p>In order to learn is a program, but also in order to better popularize certain things.</p></li> <li><strong>Handlebars</strong> Handlebars is the improvement of Mustache. The display is separated from logic and is syntactically compatible with Mustache. Can be compiled into code to improve mustache support for paths, but it is necessary to use the Server-side JavaScript engine such as Node. JS if it needs to be performed on the server Side.</li> </ol> </ol><p><p></p></p>Project<p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">The front and back end of the design, back to the foreground only provide JSON Data. So in a sense it might be just for browsing, and this is going to be a framework that works with the Backend. In general, a site suitable for reading Classes.</p></p><p><p></p></p>Source<p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">The code is still on github. The basic function has been able to works.</p></p><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">Https://github.com/gmszone/moqi.mobi</p></p>Progress and purpose<p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">Final Goal: build a CMS system for mobile Platforms.</p></p><p><p></p></p><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">Current: for such a project, it is now considered to give priority to supporting the following two frameworks,</p></p> <ol> <ol> <li style="margin: 0px; padding: 1px 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 14px !important; font-family: inherit; vertical-align: baseline; list-style-type: disc;">Django+tastypie API</li> <li style="margin: 0px; padding: 1px 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 14px !important; font-family: inherit; vertical-align: baseline; list-style-type: disc;">Wordpress</li> </ol> </ol><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">Now: ability to read data from the Background.</p></p><p><p></p></p>Other<p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">Some of the better data are</p></p> <ul style="margin: 0px 0px 15px; padding-left: 0px; border: 0px; font-weight: bold; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important;"> <ul style="margin: 0px 0px 15px; padding-left: 0px; border: 0px; font-weight: bold; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important;"> <li style="margin: 0px; padding: 1px 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 14px !important; font-family: inherit; vertical-align: baseline; list-style-type: disc;">Organizing your application using Modules</li> <li style="margin: 0px; padding: 1px 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 14px !important; font-family: inherit; vertical-align: baseline; list-style-type: disc;">Converting an existing Backbone.js project to Require.js</li> </ul> </ul>Related Resources<p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">QQ discussion Group: 344271543</p></p><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;"><p style="border: 0px; font-family: Arial, sans-serif; vertical-align: baseline; color: rgb(68, 68, 68); line-height: 18px; margin-top: 1em !important; margin-bottom: 1em !important; padding-top: 0px !important; padding-bottom: 0px !important; font-size: 14px !important;">Source Code Github:https://github.com/gmszone/moqi.mobi</p></p> <p><p>Getting Started with javascript-based Mobile Web cms--a Brief Introduction</p></p></span>