Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile web apps here and now!

602 views

Published on

Trends in web development and how they apply when developing mobile web apps.

Published in: Technology, Design
  • Be the first to comment

Mobile web apps here and now!

  1. 1. MOBILE WEB APPS, HERE AND NOW! SUSTAINABLE TRENDS FOR DEVELOPING MOBILE WEB APPS /AlexGyoshev @alex_gyoshev
  2. 2. THREE TYPES OF MOBILE APPS Native Hybrid Web
  3. 3. WHY WEB APPS? Single codebase Maximum reach Instantdeployment
  4. 4. WHY NOT WEB APPS? Notalldevice APIs available Notas immersive as native
  5. 5. PROVEN TECHNIQUES FOR MODERN WEB APPS Responsive Web Design Templates Observable objects DataSynchronization Components
  6. 6. EXPLAINING THE WHY, NOT THE HOW. HTTP://IS.GD/WHY_HOW GOAL: INSPIRE YOU TO USE THESE APPROACHES
  7. 7. RESPONSIVE WEB DESIGN
  8. 8. WHY? WEB APP != IMMEDIATE REACH ACCOMMODATE MULTITUDE OF DEVICES
  9. 9. RWD FOR APPS? USERS DO NOT DISTINGUISH WEB APPS FROM WEBSITES. HTTP://IS.GD/CASE_STUDY_RWA
  10. 10. TEMPLATES
  11. 11. TEMPLATE ENGINES? WE'VE GOT PLENTY. Underscore ResigMicro templates Mustache Handlebars EJS Kendo UI doT jQuery.tmpl PURE Hogan …and manymore
  12. 12. WHY? SEPARATE DATA AND PRESENTATION
  13. 13. WHAT DOES THIS HAVE TO DO WITH MOBILE? DIFFERENT TEMPLATES FOR DIFFERENT DEVICES
  14. 14. EXAMPLE: UNDERSCORE AND KENDO UI JSON { "name":"Alex", "location":"Romania", "avatar":"http://gyoshev.net/avatar.jpg" } TEMPLATE <scriрtid="badge"type="not/javascript"> <imgsrc="#=avatar#"/> <p>Hello,mynameis<strong>#:name#</strong></p> <p>I'mcurrentlyin#:location#.</p> </scriрt> USAGE vartemplate=kendo.template($("#badge").html()); varhtml=template(json);
  15. 15. THE FUTURE: W3C TEMPLATES <templateid="badge"> <img>class="avatar"src=""/> <p>Hello,mynameis<strongclass="name"></strong></p> <p>I'mcurrentlyin<spanclass="location"></span>.</p> </template> varcontent=document.getElementById("badge").content; content.querySelector(".avatar").src=user.avatar; content.querySelector(".name").textContent=user.name; content.querySelector(".location").textContent=user.location; vardomElement=content.cloneNode(true);
  16. 16. OBSERVABLE OBJECTS
  17. 17. FRAMEWORKS THAT PROVIDE THIS Backbone Kendo UI (Observable) Knockout Reactive Rivet AngularJS Flight Dojo (Observable)
  18. 18. WHY? SEPARATE DATA AND LOGIC
  19. 19. WHAT DOES THIS HAVE TO DO WITH MOBILE? NOTHING. IT'S JUST GOOD TASTE.
  20. 20. EXAMPLE TIGHTLY COUPLED CODE functionaddPost(post){ //changedata posts.push(post); //executecode renderPosts(posts); updateMenu(posts); } DECOUPLED CODE //initialize posts.bind("change",renderPosts); posts.bind("change",updateMenu); //addingnewdatawillautomaticallyexecutethecode posts.push({title:"Anewpost!"});
  21. 21. THE FUTURE: OBJECT.OBSERVE PART OF ECMASCRIPT 5 (HARMONY) varposts=[]; Object.observe(posts,renderPosts); Object.observe(posts,updateMenu); posts.push({title:"Anewpost!"});
  22. 22. DATA SYNCHRONIZATION
  23. 23. FRAMEWORKS THAT PROVIDE THIS Backbone (Collection) Kendo UI (DataSource) AngularJS Dojo (Store) Y.DataSource
  24. 24. WHY? SEPARATE DATA AND STORAGE BONUS: DECOUPLE CLIENT AND SERVER BONUS: EASIER TESTING
  25. 25. WHAT DOES THIS HAVE TO DO WITH MOBILE? STORAGE CAN BE OFFLINE ALLOWS LATE SYNCHRONIZATION
  26. 26. EXAMPLE TRADITIONAL FETCHING OF DATA $.get("/posts",function(data,status){ if(status==404){ returnshowError(); } varposts=data.posts; renderPosts(posts); }); FETCHING DATA WITH DATA SOURCE vardataSource=newDataSource({ transport:{read:"/posts"}, schema:{data:"posts"} }); dataSource.bind("change",renderPosts); dataSource.bind("error",showError);
  27. 27. COMPONENTS
  28. 28. FRAMEWORKS THAT PROVIDE COMPONENTS Kendo UI jQueryUI Dojo YUI etc.
  29. 29. WHY? REUSABILITY TESTABILITY
  30. 30. WHAT DOES THIS HAVE TO DO WITH MOBILE? REUSE IN DIFFERENT APP LAYOUTS
  31. 31. JUSTIN MEYER, JSMVC AUTHOR: “The secretto building large apps is… …never build large apps.”
  32. 32. THE FUTURE: WEB COMPONENTS <!--define--> <elementextends="button"name="fancy-button"> <style> </style> <content></content> </element> <!--use--> <buttonis="fancy-button"> Dosomethingfancy </button> @host{ font-size:20em;/*makeithuge*/ color:salmon;/*makeitBOLD!*/ }
  33. 33. WRAP-UP PROVEN TECHNIQUES FOR WEB DEVELOPMENT Responsive Web Design Templates Observable objects DataSynchronization Components PREPARE FOR THE FUTURE: DEMOS.KENDOUI.COM
  34. 34. QUESTIONS? I LOVE QUESTIONS. try: demos.kendoui.com slides: slideshare.net/alexandergyoshev @alex_gyoshev alex@gyoshev.net

×