Creating Mobile Apps with HTML5, JavaScript and CSS - Web Unleashed

Are you currently a web developer looking to cash in on the millions of dollars being made in the mobile app market? Well, get in line! In all seriousness, us web developers have a huge opportunity to utilize our knowledge of HTML5 in order to create mobile applications. In this session, we’ll explore the various ways we can build and deploy mobile applications using HTML5, including some of the amazing tools that are out there to make the process a breeze. We will also discuss potential pitfalls that are good to avoid and tips on how to optimize app development with HTML5.

For full source code of the project and the slides, written in Reveal.js, jump over to my GitHub:
https://github.com/bergenhem/talks/tree/master/mobile-apps-with-html5

Transcript

1. CREATING MOBILE APPS WITH HTML, JAVASCRIPT AND CSS WEB UNLEASHED - NOVEMBER 9TH - CARL BERGENHEM
2. INTRODUCTIONS Carl Bergenhem Enterprise Solutions Consultant @Telerik bergenhem.github.com @carlbergenhem
3. WHO IS TELERIK? SOFTWARE COMPANY DELIVERS PROJECT MANAGEMENT, DEVELOPER AND TESTING TOOLS FOR DEVELOPERS MASTERMINDS BEHIND AND OVERALL PRETTY AWESOME ;) KENDO UI ICENIUM
4. IS MOBILE REALLY THAT IMPORTANT?
5. FACT Mobile app revenues will double this year to $12 billion
6. FACT Tablet sales will increase nearly 100% this year
7. FACT Lightweight OS's will surpass traditional OS's in 2014
8. FACT Smartphone shipments already exceed PC shipments
9. FACT 82% of time spent with mobile media happens via apps
10. WHY SHOULD WE CARE?
11. ENTERPRISE IS GOING MOBILE 22% deploying tablets this year 84% deploying iPads 20% employee owned, but used for business
12. STATE GOVENMENT IS GOING MOBILE 38% launching mobile offerings 50% doing development in-house 55% doing responsive design
13. EVERYONE IS GOING MOBILE Elderly Children My mom
14. OK, SO MOBILE IS IMPORTANT NOW WHAT?
15. NATIVE VS. WEB
17. NATIVE HAS ITS ADVANTAGES... App store visiblity Full device API access Security in compilation Familiar to users
18. iOS ObjC UIKit XCode iPhone and iPad Android Java XML Eclipse* Android Devices Blackberry Poly* Poly* Eclipse* Blackberry Devices ...AND ITS COSTS
19. DON'T DESPAIR! THERE'S HOPE
20. HTML5 TO THE RESCUE!
21. A BETTER CHOICE HTML5 HTML CSS JavaScript Any IDE iOS, Android and BlackBerry
23. ALREADY BEING DONE APPS UTILIZING HTML5 GrooveShark Gmail Cut the Rope LinkedIn
24. TWO APPROACHES
25. WEB APP VS. HYBRID APP
26. WEB APPROACH Single application Easy to maintain Available on all devices Despite make and model Future OS
27. HOWEVER... Limited to device browser No access to native features User knows its in browser
28. WEB APP TECHINQUES USING CSS GET DEVICE WIDTH < l i n k r e l = ' s t y l e s h e e t ' m e d i a = ' s c r e e n a n d ( m i n - d e v i c e - w i d t h : 4 8 0 p x ' h r e f = ' c u s t o m 4 8 0 . c s s ' / >
29. WEB APP TECHNIQUES USING CSS GET VIEWPORT SIZE < l i n k r e l = ' s t y l e s h e e t ' m e d i a = ' s c r e e n a n d ( m i n - w i d t h : 4 8 1 p x ) a n d ( m a x - w i d t h : 6 0 0 p x ) ' h r e f = ' c u s t o m C S S F i l e . c s s ' / >
30. WEB APP TECHNIQUES USING JAVASCRIPT v a r w i d t h = $ ( w i n d o w ) . w i d t h ( ) ; i f ( ( w i d t h > 4 8 1 ) & & ( w i d t h < 6 0 0 ) ) { / * U p d a t e C S S f i l e s h e r e * / }
31. MORE IN DEPTH PRESENTATION NEXT SESSION SLOT (10:15-11:15) ADAPT AND RESPOND: KEEPING RESPONSIVE INTO THE FUTURE EXECUTIVE DINING ROOM CHRIS MILLS
32. HYBRID APPROACH Access to many native features Camera Accelerometer And more! Appears native to users App Store and Google Play ready
33. NOT ALL FUN AND GAMES Reliant on packaging library Lack of API hooks Unsupported OS Not suitable for games etc. (yet)
34. HOW IS THIS DONE? 1. Create HTML, CSS and JavaScript Application 2. Wrap with Cordova 3. Publish 4. Pray 5. $$$
35. HYBRID APP DEMO
36. EASY AS Π
37. FEW ISSUES How to structure UI Native-looking UI Transitions and animations
38. ENTER KENDO UI NATIVE UI ON IOS, ANDROID AND BLACKBERRY TRANSITIONS AND ANIMATIONS GALORE Check it out at kendoui.com
39. QUICK KENDO DEMO (?)
40. THANKS! SLIDE CREDITS by @carlbergenhem reveal.js @hakimel