Mobile web apps here and now!

  • 261 views
Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
261
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
3
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. MOBILE WEB APPS, HERE AND NOW! SUSTAINABLE TRENDS FOR DEVELOPING MOBILE WEB APPS /AlexGyoshev @alex_gyoshev
  • 2. THREE TYPES OF MOBILE APPS Native Hybrid Web
  • 3. WHY WEB APPS? Single codebase Maximum reach Instantdeployment
  • 4. WHY NOT WEB APPS? Notalldevice APIs available Notas immersive as native
  • 5. PROVEN TECHNIQUES FOR MODERN WEB APPS Responsive Web Design Templates Observable objects DataSynchronization Components
  • 6. EXPLAINING THE WHY, NOT THE HOW. HTTP://IS.GD/WHY_HOW GOAL: INSPIRE YOU TO USE THESE APPROACHES
  • 7. RESPONSIVE WEB DESIGN
  • 8. WHY? WEB APP != IMMEDIATE REACH ACCOMMODATE MULTITUDE OF DEVICES
  • 9. RWD FOR APPS? USERS DO NOT DISTINGUISH WEB APPS FROM WEBSITES. HTTP://IS.GD/CASE_STUDY_RWA
  • 10. TEMPLATES
  • 11. TEMPLATE ENGINES? WE'VE GOT PLENTY. Underscore ResigMicro templates Mustache Handlebars EJS Kendo UI doT jQuery.tmpl PURE Hogan …and manymore
  • 12. WHY? SEPARATE DATA AND PRESENTATION
  • 13. WHAT DOES THIS HAVE TO DO WITH MOBILE? DIFFERENT TEMPLATES FOR DIFFERENT DEVICES
  • 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. 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. OBSERVABLE OBJECTS
  • 17. FRAMEWORKS THAT PROVIDE THIS Backbone Kendo UI (Observable) Knockout Reactive Rivet AngularJS Flight Dojo (Observable)
  • 18. WHY? SEPARATE DATA AND LOGIC
  • 19. WHAT DOES THIS HAVE TO DO WITH MOBILE? NOTHING. IT'S JUST GOOD TASTE.
  • 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. THE FUTURE: OBJECT.OBSERVE PART OF ECMASCRIPT 5 (HARMONY) varposts=[]; Object.observe(posts,renderPosts); Object.observe(posts,updateMenu); posts.push({title:"Anewpost!"});
  • 22. DATA SYNCHRONIZATION
  • 23. FRAMEWORKS THAT PROVIDE THIS Backbone (Collection) Kendo UI (DataSource) AngularJS Dojo (Store) Y.DataSource
  • 24. WHY? SEPARATE DATA AND STORAGE BONUS: DECOUPLE CLIENT AND SERVER BONUS: EASIER TESTING
  • 25. WHAT DOES THIS HAVE TO DO WITH MOBILE? STORAGE CAN BE OFFLINE ALLOWS LATE SYNCHRONIZATION
  • 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. COMPONENTS
  • 28. FRAMEWORKS THAT PROVIDE COMPONENTS Kendo UI jQueryUI Dojo YUI etc.
  • 29. WHY? REUSABILITY TESTABILITY
  • 30. WHAT DOES THIS HAVE TO DO WITH MOBILE? REUSE IN DIFFERENT APP LAYOUTS
  • 31. JUSTIN MEYER, JSMVC AUTHOR: “The secretto building large apps is… …never build large apps.”
  • 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. WRAP-UP PROVEN TECHNIQUES FOR WEB DEVELOPMENT Responsive Web Design Templates Observable objects DataSynchronization Components PREPARE FOR THE FUTURE: DEMOS.KENDOUI.COM
  • 34. QUESTIONS? I LOVE QUESTIONS. try: demos.kendoui.com slides: slideshare.net/alexandergyoshev @alex_gyoshev alex@gyoshev.net