MOBILE WEB APPS,
HERE AND NOW!
SUSTAINABLE TRENDS FOR DEVELOPING MOBILE WEB APPS
/AlexGyoshev @alex_gyoshev
THREE TYPES OF MOBILE APPS
Native
Hybrid
Web
WHY WEB APPS?
Single codebase
Maximum reach
Instantdeployment
WHY NOT WEB APPS?
Notalldevice APIs available
Notas immersive as native
PROVEN TECHNIQUES
FOR MODERN WEB APPS
Responsive Web Design
Templates
Observable objects
DataSynchronization
Components
EXPLAINING THE WHY, NOT THE HOW.
HTTP://IS.GD/WHY_HOW
GOAL: INSPIRE YOU TO USE THESE APPROACHES
RESPONSIVE WEB DESIGN
WHY?
WEB APP != IMMEDIATE REACH
ACCOMMODATE MULTITUDE OF DEVICES
RWD FOR APPS?
USERS DO NOT DISTINGUISH WEB APPS FROM WEBSITES.
HTTP://IS.GD/CASE_STUDY_RWA
TEMPLATES
TEMPLATE ENGINES?
WE'VE GOT PLENTY.
Underscore
ResigMicro templates
Mustache
Handlebars
EJS
Kendo UI
doT
jQuery.tmpl
PURE
...
WHY?
SEPARATE DATA AND PRESENTATION
WHAT DOES THIS HAVE TO DO WITH MOBILE?
DIFFERENT TEMPLATES FOR DIFFERENT DEVICES
EXAMPLE: UNDERSCORE AND KENDO UI
JSON
{
"name":"Alex",
"location":"Romania",
"avatar":"http://gyoshev.net/avatar.jpg"
}
TE...
THE FUTURE: W3C TEMPLATES
<templateid="badge">
<img>class="avatar"src=""/>
<p>Hello,mynameis<strongclass="name"></strong><...
OBSERVABLE OBJECTS
FRAMEWORKS THAT PROVIDE THIS
Backbone
Kendo UI (Observable)
Knockout
Reactive
Rivet
AngularJS
Flight
Dojo (Observable)
WHY?
SEPARATE DATA AND LOGIC
WHAT DOES THIS HAVE TO DO WITH MOBILE?
NOTHING. IT'S JUST GOOD TASTE.
EXAMPLE
TIGHTLY COUPLED CODE
functionaddPost(post){
//changedata
posts.push(post);
//executecode
renderPosts(posts);
updat...
THE FUTURE: OBJECT.OBSERVE
PART OF ECMASCRIPT 5 (HARMONY)
varposts=[];
Object.observe(posts,renderPosts);
Object.observe(p...
DATA SYNCHRONIZATION
FRAMEWORKS THAT PROVIDE THIS
Backbone (Collection)
Kendo UI (DataSource)
AngularJS
Dojo (Store)
Y.DataSource
WHY?
SEPARATE DATA AND STORAGE
BONUS: DECOUPLE CLIENT AND SERVER
BONUS: EASIER TESTING
WHAT DOES THIS HAVE TO DO WITH MOBILE?
STORAGE CAN BE OFFLINE
ALLOWS LATE SYNCHRONIZATION
EXAMPLE
TRADITIONAL FETCHING OF DATA
$.get("/posts",function(data,status){
if(status==404){
returnshowError();
}
varposts=...
COMPONENTS
FRAMEWORKS THAT PROVIDE COMPONENTS
Kendo UI
jQueryUI
Dojo
YUI
etc.
WHY?
REUSABILITY
TESTABILITY
WHAT DOES THIS HAVE TO DO WITH MOBILE?
REUSE IN DIFFERENT APP LAYOUTS
JUSTIN MEYER, JSMVC AUTHOR:
“The secretto building large apps is…
…never build large apps.”
THE FUTURE: WEB COMPONENTS
<!--define-->
<elementextends="button"name="fancy-button">
<style>
</style>
<content></content>...
WRAP-UP
PROVEN TECHNIQUES FOR WEB DEVELOPMENT
Responsive Web Design
Templates
Observable objects
DataSynchronization
Compo...
QUESTIONS? I LOVE QUESTIONS.
try: demos.kendoui.com
slides: slideshare.net/alexandergyoshev
@alex_gyoshev
alex@gyoshev.net
Upcoming SlideShare
Loading in …5
×

Mobile web apps here and now!

490 views
429 views

Published on

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

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
490
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×