0
itcampro@ itcamp13# Premium conference on Microsoft technologiesChasing the one codebase,multiple platforms dreamLorant Do...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileHuge thanks to our sponsors!
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Why HTML5?• PhoneGap• Best practices•...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Convince you that HTML5 is a validalt...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• The Helios storyBackground
itcampro@ itcamp13# Premium conference on Microsoft technologiesWHY HTML5?
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Rng 0: today• Rng1: 2D games, music, ...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Performance– The Facebook issue– The ...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Minimize DOM node instances• Avoid de...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• How do I make an app that exactly mat...
itcampro@ itcamp13# Premium conference on Microsoft technologiesPHONEGAP
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobilePhonegapPhoneGap === Cordova
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileNative
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileHybrid
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Accelerometer• Camera• Capture : Imag...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobilePhonegap build
itcampro@ itcamp13# Premium conference on Microsoft technologiesBEST PRACTICES
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile1. Abstract Data Access$.ajax({url: "/a...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Default JavaScript alert gives away t...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Benefits– Fast– Works offline– Contro...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Benefits– Maintainable– Toolable– Sep...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Javascript does not give you the righ...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile6. Consider Frameworks
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Leverage the browser stack7. Routing
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile8. Abstract Device FeaturesInteraction ...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• alert()• -webkit-touch-callout: none;...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Dont generate UI on the server• Dont ...
itcampro@ itcamp13# Premium conference on Microsoft technologiesKNOCKOUT AND DURANDAL
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Separation of concerns• Data binding–...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Prism for JavaScript…or something lik...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Separate code into modules• Load modu...
itcampro@ itcamp13# Premium conference on Microsoft technologiesBREEZE
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• CRUD operations are only basics• Rela...
itcampro@ itcamp13# Premium conference on Microsoft technologiesTYPESCRIPT
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• TypeScript is a superset of JavaScrip...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Standard JavaScript Code• Static Typi...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• exports and imports• constructor• ext...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileCode hierarchyModuleClassInterfaceField...
itcampro@ itcamp13# Premium conference on Microsoft technologiesTOOLING
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• VS 2012, Blend• WYSIWYG: Dreamweaver,...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• The PhoneGap Emulator– Leverages Chro...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Selenium– UI atutomation• Unit testin...
itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• No exactly a smooth ride• Integrate t...
itcampro@ itcamp13# Premium conference on Microsoft technologiesQ & A
Upcoming SlideShare
Loading in...5
×

ITCamp 2013 - Lorant Domokos - Chasing the one codebase, multiple platforms dream

617

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
617
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "ITCamp 2013 - Lorant Domokos - Chasing the one codebase, multiple platforms dream"

  1. 1. itcampro@ itcamp13# Premium conference on Microsoft technologiesChasing the one codebase,multiple platforms dreamLorant DomokosFortechMicrosoft Student Partners
  2. 2. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileHuge thanks to our sponsors!
  3. 3. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Why HTML5?• PhoneGap• Best practices• Knockout, Durandal• Breeze• TypeScript• ToolingAgenda
  4. 4. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Convince you that HTML5 is a validalternative in some scenarios• HTML5 is rich enough• JavaScript is maturing• Lots of great frameworks• Great community• The tooling is improving• …probably the futureObjective
  5. 5. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• The Helios storyBackground
  6. 6. itcampro@ itcamp13# Premium conference on Microsoft technologiesWHY HTML5?
  7. 7. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
  8. 8. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
  9. 9. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
  10. 10. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
  11. 11. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
  12. 12. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Rng 0: today• Rng1: 2D games, music, video, apps• Rng2: Next gen, WebGLRingmark
  13. 13. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
  14. 14. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Performance– The Facebook issue– The jQuery Mobile issue• UX?• 90 percentWhy not?
  15. 15. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Minimize DOM node instances• Avoid deeply nested HTML DOM structures• Use CSS transforms ()• Use CSS animations & transitions• Use fixed widths and heights for DOMelements• Preload images or assets used in CSS styles• Be smart with your HTML DOM elemen• Touch InteractivityPerformance tips
  16. 16. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• How do I make an app that exactly matchesnative look and feel for all platforms?– My response: Don’t.– 1) this is very difficult to do, and 2) if anythingchanges in the OS…• Uncanny valley• Respect App Store guidelines• Create custom identity for your app• That said…it’s not impossibleUX
  17. 17. itcampro@ itcamp13# Premium conference on Microsoft technologiesPHONEGAP
  18. 18. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobilePhonegapPhoneGap === Cordova
  19. 19. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileNative
  20. 20. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileHybrid
  21. 21. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
  22. 22. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Accelerometer• Camera• Capture : Image, Audio, Video• Compass• Contacts• Connection• File• Geolocation• Media• Notification• Storage• Websocket (Android)API
  23. 23. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobilePhonegap build
  24. 24. itcampro@ itcamp13# Premium conference on Microsoft technologiesBEST PRACTICES
  25. 25. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &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. 26. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile
  27. 27. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Default JavaScript alert gives away the factthat 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 thebrowser2. Browser runnable
  28. 28. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Benefits– Fast– Works offline– Control over experience• Caveats– More Complex– Memory management– Modular Strategy3. Use Single Page Architecture
  29. 29. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Benefits– Maintainable– Toolable– Separation of concerns• Examples– Mustache.js– Handlebars.js– Underscore.js4. Use Templates
  30. 30. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Javascript does not give you the right todisregard SOLID principles5. Use MV*
  31. 31. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile6. Consider Frameworks
  32. 32. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Leverage the browser stack7. Routing
  33. 33. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile8. Abstract Device FeaturesInteraction Mouse TouchNotification Alert NativeStorage Online OfflineSensors Unavailable Available
  34. 34. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• alert()• -webkit-touch-callout: none;• -webkit-tap-highlight-color:rgba(0, 0, 0, 0);9. Hide HTMLish Behaviors
  35. 35. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Dont generate UI on the server• Dont wait for data to display the UI• Cache everything (data, selectors, precompiledtemplates, ...)• Use Hardware acceleration• Avoid click events 300ms delay• Use CSS sprite sheets• Limit shadows and gradients• Avoid re!ows• Do you need that framework?• Test10. Architect for Performance
  36. 36. itcampro@ itcamp13# Premium conference on Microsoft technologiesKNOCKOUT AND DURANDAL
  37. 37. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Separation of concerns• Data binding– Observable properties– Observable arrays– Computed propertiesKnockout and MVVM
  38. 38. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Prism for JavaScript…or something like that• Handles UI plumbing– Navigation– View and ViewModel compositon and binding– Maintainability– App lifecycle– Async– Convention basedDurandal
  39. 39. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Separate code into modules• Load modules on demand• Bundle, minify, optimizeRequireJS
  40. 40. itcampro@ itcamp13# Premium conference on Microsoft technologiesBREEZE
  41. 41. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• CRUD operations are only basics• Relations, object graphs• Caching, offline• LINQ like queriesMVVM+S
  42. 42. itcampro@ itcamp13# Premium conference on Microsoft technologiesTYPESCRIPT
  43. 43. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &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 codeinto Modules and Classes• Cross compiles into JavaSciptWhat is TypeScript
  44. 44. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Standard JavaScript Code• Static Typing• Encapsulation with Modules and Classes• Classes support Constructors, Properties,Fields and Functions• Interfaces• Lambda Functions =>• Intellisense and syntax checkingFeatures
  45. 45. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• exports and imports• constructor• extends• implements• Interface• public/private• … Rest syntax• => Arrow or lambda functions• <typename> type conversion• : assignmentSintactic sugar
  46. 46. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &MobileCode hierarchyModuleClassInterfaceFieldsConstructorsPropertiesFunctions
  47. 47. itcampro@ itcamp13# Premium conference on Microsoft technologiesTOOLING
  48. 48. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• VS 2012, Blend• WYSIWYG: Dreamweaver, IBM WorklightIDE
  49. 49. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &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. 50. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• Selenium– UI atutomation• Unit testing– Qunit– Jasmine• Code coverage– JSCover• PhantomJS– Headless browserTesting
  51. 51. itcampro@ itcamp13# Premium conference on Microsoft technologiesDevelopment &Mobile• No exactly a smooth ride• Integrate tools/libraries one at a time• Differences between browsers/platforms• Need Mac for iOS• Always test on devicesConclusins
  52. 52. itcampro@ itcamp13# Premium conference on Microsoft technologiesQ & A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×