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

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