Download as PDF, PPTX
![itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Default JavaScript alert gives away the fact
that your application is not native
• PhoneGap API: navigator.notification.alert(message,
alertCallback, [title], [buttonName])
• ... but that doesn’t work in your browser
• Solution: Build an abstraction layer
• Display JavaScript alert when running in the
browser
2. Browser runnable](https://image.slidesharecdn.com/itcamp2013-lorantdomokos-chasingtheonecodebasemultipleplatformsdream-130527135553-phpapp01/75/ITCamp-2013-Lorant-Domokos-Chasing-the-one-codebase-multiple-platforms-dream-27-2048.jpg)
Uploaded byITCamp
ITCamp 2013 - Lorant Domokos - Chasing the one codebase, multiple platforms dream
This document summarizes a conference on HTML5 mobile development. The conference agenda covered why HTML5 is a valid alternative, tools like PhoneGap for building hybrid mobile apps, best practices like single page architecture and MV* patterns, frameworks like Knockout and Durandal, Breeze for managing data, TypeScript for adding types to JavaScript, and tools for development including IDEs, emulators, and testing. The document provided details on the topics covered during presentations at the conference.
More Related Content
Similar to ITCamp 2013 - Lorant Domokos - Chasing the one codebase, multiple platforms dream
ITCamp 2013 - Lorant Domokos - Chasing the one codebase, multiple platforms dream
- 1. itcampro@ itcamp13# Premiumconference on Microsoft technologies Chasing the one codebase, multiple platforms dream Lorant Domokos Fortech Microsoft Student Partners
- 2. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & MobileHuge thanks to our sponsors!
- 3. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Why HTML5? • PhoneGap • Best practices • Knockout, Durandal • Breeze • TypeScript • Tooling Agenda
- 4. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Convince you that HTML5 is a valid alternative in some scenarios • HTML5 is rich enough • JavaScript is maturing • Lots of great frameworks • Great community • The tooling is improving • …probably the future Objective
- 5. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • The Helios story Background
- 6. itcampro@ itcamp13# Premiumconference on Microsoft technologies WHY HTML5?
- 7. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile
- 8. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile
- 9. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile
- 10. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile
- 11. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile
- 12. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Rng 0: today • Rng1: 2D games, music, video, apps • Rng2: Next gen, WebGL Ringmark
- 13. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile
- 14. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Performance – The Facebook issue – The jQuery Mobile issue • UX? • 90 percent Why not?
- 15. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Minimize DOM node instances • Avoid deeply nested HTML DOM structures • Use CSS transforms () • Use CSS animations & transitions • Use fixed widths and heights for DOM elements • Preload images or assets used in CSS styles • Be smart with your HTML DOM elemen • Touch Interactivity Performance tips
- 16. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • How do I make an app that exactly matches native look and feel for all platforms? – My response: Don’t. – 1) this is very difficult to do, and 2) if anything changes in the OS… • Uncanny valley • Respect App Store guidelines • Create custom identity for your app • That said…it’s not impossible UX
- 17. itcampro@ itcamp13# Premiumconference on Microsoft technologies PHONEGAP
- 18. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & MobilePhonegap PhoneGap === Cordova
- 19. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & MobileNative
- 20. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & MobileHybrid
- 21. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile
- 22. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Accelerometer • Camera • Capture : Image, Audio, Video • Compass • Contacts • Connection • File • Geolocation • Media • Notification • Storage • Websocket (Android) API
- 23. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & MobilePhonegap build
- 24. itcampro@ itcamp13# Premiumconference on Microsoft technologies BEST PRACTICES
- 25. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile1. Abstract Data Access $.ajax({url: "/api/employee/3"}).done(function(employee) { //Do something with employee }); dataAdapter.findById(3).done(function(employee) { //Do something with employee }); VS
- 26. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile
- 27. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Default JavaScript alert gives away the fact that your application is not native • PhoneGap API: navigator.notification.alert(message, alertCallback, [title], [buttonName]) • ... but that doesn’t work in your browser • Solution: Build an abstraction layer • Display JavaScript alert when running in the browser 2. Browser runnable
- 28. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Benefits – Fast – Works offline – Control over experience • Caveats – More Complex – Memory management – Modular Strategy 3. Use Single Page Architecture
- 29. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Benefits – Maintainable – Toolable – Separation of concerns • Examples – Mustache.js – Handlebars.js – Underscore.js 4. Use Templates
- 30. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Javascript does not give you the right to disregard SOLID principles 5. Use MV*
- 31. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile6. Consider Frameworks
- 32. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Leverage the browser stack 7. Routing
- 33. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile8. Abstract Device Features Interaction Mouse Touch Notification Alert Native Storage Online Offline Sensors Unavailable Available
- 34. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • alert() • -webkit-touch-callout: none; • -webkit-tap-highlight-color:rgba(0, 0, 0, 0); 9. Hide HTMLish Behaviors
- 35. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Don't generate UI on the server • Don't wait for data to display the UI • Cache everything (data, selectors, precompiled templates, ...) • Use Hardware acceleration • Avoid click event's 300ms delay • Use CSS sprite sheets • Limit shadows and gradients • Avoid re!ows • Do you need that framework? • Test 10. Architect for Performance
- 36. itcampro@ itcamp13# Premiumconference on Microsoft technologies KNOCKOUT AND DURANDAL
- 37. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Separation of concerns • Data binding – Observable properties – Observable arrays – Computed properties Knockout and MVVM
- 38. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Prism for JavaScript…or something like that • Handles UI plumbing – Navigation – View and ViewModel compositon and binding – Maintainability – App lifecycle – Async – Convention based Durandal
- 39. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Separate code into modules • Load modules on demand • Bundle, minify, optimize RequireJS
- 40. itcampro@ itcamp13# Premiumconference on Microsoft technologies BREEZE
- 41. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • CRUD operations are only basics • Relations, object graphs • Caching, offline • LINQ like queries MVVM+S
- 42. itcampro@ itcamp13# Premiumconference on Microsoft technologies TYPESCRIPT
- 43. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • TypeScript is a superset of JavaScript • You can enter pure JavaScript into TypeScript • TypeScript gives you type safety. • TypeScript gives you encapsulation. • TypeScript allows you to organize your code into Modules and Classes • Cross compiles into JavaScipt What is TypeScript
- 44. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Standard JavaScript Code • Static Typing • Encapsulation with Modules and Classes • Classes support Constructors, Properties, Fields and Functions • Interfaces • Lambda Functions => • Intellisense and syntax checking Features
- 45. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • exports and imports • constructor • extends • implements • Interface • public/private • … Rest syntax • => Arrow or lambda functions • <typename> type conversion • : assignment Sintactic sugar
- 46. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & MobileCode hierarchy Module ClassInterface Fields Constructors Properties Functions
- 47. itcampro@ itcamp13# Premiumconference on Microsoft technologies TOOLING
- 48. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • VS 2012, Blend • WYSIWYG: Dreamweaver, IBM Worklight IDE
- 49. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • The PhoneGap Emulator – Leverages Chrome and Ripple emulator – Best in class Chrome developer tools • On-Device Remote Debugging – iPhone simulator integration with Safari – Remote Debugging with Weinre • Remote web inspector • HTML, CSS manipulation • No JS breakpoints – Good old alert() Debugging Environments
- 50. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • Selenium – UI atutomation • Unit testing – Qunit – Jasmine • Code coverage – JSCover • PhantomJS – Headless browser Testing
- 51. itcampro@ itcamp13# Premiumconference on Microsoft technologies Development & Mobile • No exactly a smooth ride • Integrate tools/libraries one at a time • Differences between browsers/platforms • Need Mac for iOS • Always test on devices Conclusins
- 52. itcampro@ itcamp13# Premiumconference on Microsoft technologies Q & A