Seven Versions of One Web Application
3 likes2,350 views
The document reviews seven versions of a single-page web application (SPA) using various technologies such as HTML/Ajax, jQuery, Ext JS, and more. It discusses responsive web design, modularization techniques, and frameworks like jQuery Mobile and Sencha Touch, each with their respective pros and cons. The document also provides guidance on choosing the right framework based on application requirements and developer preferences.
![Asynchronous
Module
Defini?on
(AMD)
AMD
is
a
proposal
for
async
loading
of
both
the
module
and
its
dependencies
in
Web
browsers.
You
provide
define
and
require
func?ons:
define(!
module_id, // optional!
[dependencies],!
function (){!
// This function runs once when the module and its dependencies are loaded!
}!
);!
!
!
require(["main"], function() {!
console.log(”The module main is loaded");!
});!
!
!
!
!
The
func?on
define
defines
the
module
and
returns
it
once
it’s
needed.
The
require
executes
the
given
func?on
checking
that
the
dependencies
were
loaded.](https://image.slidesharecdn.com/7versiononeapp-140220001421-phpapp02/85/Seven-Versions-of-One-Web-Application-32-320.jpg)
![The
app.JS
Ext.applica?on({
name:
'SSC',
requires:
[
'Ext.MessageBox'
],
views:
[
'About',
'CampaignsMap',
'DonateForm',
'DonorsChart',
'LoginForm',
'LoginToolbar',
'Main',
'Media',
'Share',
'ShareTile'
],
stores:
[
'Campaigns',
'Countries',
'Donors',
'States',
'Videos'
],x
controllers:
[
'Login'
],
launch:
func?on()
{
//
Destroy
the
#appLoadingIndicator
element
Ext.fly('appLoadingIndicator').destroy();
//
Ini?alize
the
main
view
Ext.Viewport.add(Ext.create('SSC.view.Main'));
},
onUpdated:
func?on()
{
Ext.Msg.confirm(
"Applica?on
Update",
"This
applica?on
has
just
successfully
been
updated
to
the
latest
version.
Reload
now?",
func?on(bukonId)
{
if
(bukonId
===
'yes')
{
window.loca?on.reload();
}
}
);
}
});](https://image.slidesharecdn.com/7versiononeapp-140220001421-phpapp02/85/Seven-Versions-of-One-Web-Application-46-320.jpg)
Seven Versions of One Web Application
- 1. Yakov Fain, Farata Systems 7 Versions of One Web Application
- 3. We’ll Review 7 Versions of the UI of this Single Page Applica?on SPA: One Web page, AJAX calls bring the data as needed, CSS hides/shows HTML elements
- 4. … and the 7 versions are… 1. HTML/AJAX 2. HTML + Responsive Web Design 3. With jQuery library 4. With Ext JS framework 5. Modularizing HTML5 6. With jQuery Mobile 7. With Sencha Touch
- 5. Wireframing with Balsamiq Mockups
- 6. V1: HTML, JS, CSS, AJAX, JSON // Loading data with AJAX and parsing JSON func9on loadData(dataUrl) { var xhr = new XMLH+pRequest(); xhr.open('GET', dataUrl, true); xhr.onreadystatechange = func9on() { if (xhr.readyState == 4) { if (xhr.status == 200) { var jsonData = xhr.responseText; //parse json data var campaignsData = JSON.parse(jsonData).campaigns; showCampaignsInfo(campaignsData); } else { console.log(xhr.statusText); } } } xhr.send(null); }
- 7. Demo: Debugging in Chrome
- 9. V2: Responsive Web Design(RWD) • Should we create separate versions for desktop and mobile? • How many versions of the UI to create? • Can we have a single HTML version for all devices? • CSS Media Queries – layouts based on screen width • Seing CSS Breakpoints • Pros and Cons of RWD
- 10. Remember the wireframe for desktops?
- 11. Wireframing for a table in portrait
- 12. Wireframing for large phones
- 13. Wireframing for smaller phones These are the wireframes for 3 phone screens
- 14. V2: Demo 1. Basic Media Queries 2. Responsive Header 3. Responsive Dona?on 4. Responsive Final
- 15. RWD Pros and Cons • RWD is good for publishing info. Mobile frameworks can be a beker choice for interac?ve apps • RWD allows to have a single app code base • Mobile versions of an app may need limited func?onality and specific naviga?on • RWD means larger traffic (heavy CSS) – no good for slower connec?ons • Mobile frameworks offer more na?ve look and feel of the UI Libraries of responsive UI components: Bootstrap: hkp://getbootstrap.com Seman?c UI: hkp://seman?c-‐ui.com
- 16. V3: With jQuery Library • Learning jQuery is easy for designers – mostly HTML. • 40 – 50% of top Web sites use jQuery (see bultwith.com) • It’s a light-‐weight addi?on to your app – 33Kb gzipped, minified • Shorter than in JS syntax for DOM Browsing • $() – pass it a String, pass it a func?on • There are thousands plugins in jQuery Plugin Registry
- 17. DOM Querying & Func?on Chaining
- 18. An AJAX call in jQuery The shortcut methods: $.get(), $.post(), $.getJSON()
- 19. V3: Demo with jQuery
- 20. V4: With Sencha Ext JS Framework • Ext JS has rich library of enterprise-‐grade components, e.g. grids, charts • Cool code generator Sencha CMD • Promotes MVC architecture • Some code reuse for mobile app with Sencha Touch • The “weight” of the app substan?ally increases • If you decided to go with Ext JS, there is no easy way out • Doesn’t support Responsive Web Design • Has steep learning curve – has no HTML, but new JS-‐based syntax
- 21. Ext JS: index.html and app.js
- 22. Ext JS: index.html and app.js
- 23. Ext JS MVC
- 24. Genera?ng a project with Sencha CMD sencha -‐sdk /Library/ext-‐4.2 generate app HelloWorld /Users/yfain11/hello
- 25. The View Fragment: DonateForm.js
- 26. V4: Demo with Ext JS
- 27. V5: Modularizing UI • Large apps should be modularized to avoid loading all code at once. • Mul?ple <script> tags may depend on each other and have to be loaded in certain order. • Need to be able to specify dependencies between the modules. Need to avoid pollu?ng global scope and name conflicts. Manually wri?ng Modules doesn’t solve these issues. • Today: CommonJS and Async Module Defini?on (AMD) specs • Tomorrow: ECMAScript 6 spec (a.k.a. Harmony) defines modules.
- 28. One way of implemen?ng Module Pakern Passing inside the module a reference to the global window object
- 29. CommonJS is an effort to standardize JS APIs. CommonJS Modules defines 3 variables for modules: -‐ requires -‐ exports -‐ module Node.js framework implements CommonJS Modules spec and provides these global variables.
- 30. Code Sample With CommonJS
- 31. CommonJS Pros and Cons Pros: • Simple API Cons: • Mainly for the server-‐side JavaScript. Web browsers don’t have require, export, and module variables. • The require method is synchronous. • CommonJS API is suitable for loading JS files, but can’t load CSS and HTML.
- 32. Asynchronous Module Defini?on (AMD) AMD is a proposal for async loading of both the module and its dependencies in Web browsers. You provide define and require func?ons: define(! module_id, // optional! [dependencies],! function (){! // This function runs once when the module and its dependencies are loaded! }! );! ! ! require(["main"], function() {! console.log(”The module main is loaded");! });! ! ! ! ! The func?on define defines the module and returns it once it’s needed. The require executes the given func?on checking that the dependencies were loaded.
- 33. Save The Child Modularized With RequireJS Lis?ng modules in config.js
- 34. V5 Demo: With RequireJS
- 36. “Way To Give” Module Defini?on
- 37. V6: With jQuery Mobile • Easy to learn. Built on top of jQuery Core library • HTML5 allows crea?ng custom non-‐visible akributes. They have to start with data-: <div data-role="page" id="Stats"> • The UI shows one page at a ?me • Light-‐weight (90Kb gZipped)
- 38. Mul?-‐Page Template <body> <!-- Page 1 --> <div data-role="page" id="Donate” > ... </div> <!-- Page 2 --> <div data-role="page" id="Stats” > ... </div> </body> The content of mul?ple pages is located in one file. When the app starts, only the first page is displayed
- 39. Mul?-‐Page Template (cont.) <body> <!-- Page 1 --> <div data-role="page" id="Donate"> <div data-role="header" >...</div> <div data-role="content" >...</div> <div data-role="footer" >...</div> </div> <!-- Page 2 --> <div data-role="page" id="Stats"> ... </div> </body>
- 40. Naviga?on Bar <div data-role="navbar"> <ul> <li> <a href="#Who-We-Are">Who We Are</a> </li> <li> <a href="#What-We-Do">What We Do</a> </li> <li> <a href="#Where-We-Work">Where We Work</a> </li> <li> <a href="#Way-To-Give">Way To Give</a> </li> </ul> </div>
- 41. Ripple Emulator
- 42. The Back Bukon <div data-role="page" id="Stats" data-add-back-btn="true"> <div data-role="header" > <h1>Statistics</h1> </div> Statistics will go here </div>
- 43. Single-‐Page Template An HTML file contains the content of a single page. <div data-role="navbar"> <ul> <li> <a href="page-1.html" data-transition="slideup">Page #1</a> </li> <li> <a href="#" class="ui-state-persist">Page #2</a> </li> <li> <a href="page-3.html" data-transition="slideup">Page #3</a> </li> <li> <a href="page-4.html" data-transition="slideup">Page #4</a> </li> </ul> </div>
- 44. V6: Demo With jQuery Mobile
- 45. V7: With Sencha Touch • Sencha Touch is a smaller brother of Ext JS • It comes with mobile versions of lists, forms, toolbars, bukons, charts, audio, video, carousel etc. • Jumpstart development with genera?ng the app with Sencha CMD. • Package the Sencha Touch app as na?ve
- 46. The app.JS Ext.applica?on({ name: 'SSC', requires: [ 'Ext.MessageBox' ], views: [ 'About', 'CampaignsMap', 'DonateForm', 'DonorsChart', 'LoginForm', 'LoginToolbar', 'Main', 'Media', 'Share', 'ShareTile' ], stores: [ 'Campaigns', 'Countries', 'Donors', 'States', 'Videos' ],x controllers: [ 'Login' ], launch: func?on() { // Destroy the #appLoadingIndicator element Ext.fly('appLoadingIndicator').destroy(); // Ini?alize the main view Ext.Viewport.add(Ext.create('SSC.view.Main')); }, onUpdated: func?on() { Ext.Msg.confirm( "Applica?on Update", "This applica?on has just successfully been updated to the latest version. Reload now?", func?on(bukonId) { if (bukonId === 'yes') { window.loca?on.reload(); } } ); } });
- 47. The Landing Page
- 48. Login Controller
- 49. Donors Store
- 50. jQuery Mobile or Sencha Touch? Use jQuery Mobile if: • You are afraid of being locked up with any one vendor. • You need your applica?on to work on most of the mobile pla€orms. • You prefer declara?ve UI and hate debugging JavaScript.
- 51. jQuery Mobile or Sencha Touch? Use Sencha Touch if: • You like to have a rich library of pre-‐created UI • Your applica?on needs smooth anima?on • You are into MVC • You want to package your applica?on as a na?ve one • You want your applica?on to look as close to the na?ve ones as possible
- 52. V7: Demo With Sencha Touch
- 53. Where to go next? Google Dart Language: hkps://www.dartlang.org Google Angular Dart Framework: hkps://github.com/angular/angular.dart
- 54. Links • 7 versions of the Save The Child app: hkp://savesickchild.org • Enterprise Web Dev book: hkp://oreil.ly/1hxK5hl • My employer: hkp://faratasystems.com • My Twiker: @yfain