1. itcampro@ itcamp13# Premium conference on Microsoft technologies
Chasing the one codebase,
multiple platforms dream
Lorant Domokos
Fortech
Microsoft Student Partners

2. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHuge thanks to our sponsors!

3. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Why HTML5?
• PhoneGap
• Best practices
• Knockout, Durandal
• Breeze
• TypeScript
• Tooling
Agenda

4. itcampro@ itcamp13# Premium conference 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# Premium conference on Microsoft technologies
Development &
Mobile
• The Helios story
Background

6. itcampro@ itcamp13# Premium conference on Microsoft technologies
WHY HTML5?

7. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile

8. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile

9. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile

10. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile

11. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile

12. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Rng 0: today
• Rng1: 2D games, music, video, apps
• Rng2: Next gen, WebGL
Ringmark

13. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile

14. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Performance
– The Facebook issue
– The jQuery Mobile issue
• UX?
• 90 percent
Why not?

15. itcampro@ itcamp13# Premium conference 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# Premium conference 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# Premium conference on Microsoft technologies
PHONEGAP

18. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobilePhonegap
PhoneGap === Cordova

19. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileNative

20. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHybrid

21. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile

22. itcampro@ itcamp13# Premium conference 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# Premium conference on Microsoft technologies
Development &
MobilePhonegap build

24. itcampro@ itcamp13# Premium conference on Microsoft technologies
BEST PRACTICES

25. itcampro@ itcamp13# Premium conference 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# Premium conference on Microsoft technologies
Development &
Mobile

27. 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

28. itcampro@ itcamp13# Premium conference 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# Premium conference on Microsoft technologies
Development &
Mobile
• Benefits
– Maintainable
– Toolable
– Separation of concerns
• Examples
– Mustache.js
– Handlebars.js
– Underscore.js
4. Use Templates

30. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Javascript does not give you the right to
disregard SOLID principles
5. Use MV*

31. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile6. Consider Frameworks

32. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Leverage the browser stack
7. Routing

33. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile8. Abstract Device Features
Interaction Mouse Touch
Notification Alert Native
Storage Online Offline
Sensors Unavailable Available

34. itcampro@ itcamp13# Premium conference 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# Premium conference 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# Premium conference on Microsoft technologies
KNOCKOUT AND DURANDAL

37. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Separation of concerns
• Data binding
– Observable properties
– Observable arrays
– Computed properties
Knockout and MVVM

38. itcampro@ itcamp13# Premium conference 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# Premium conference on Microsoft technologies
Development &
Mobile
• Separate code into modules
• Load modules on demand
• Bundle, minify, optimize
RequireJS

40. itcampro@ itcamp13# Premium conference on Microsoft technologies
BREEZE

41. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• CRUD operations are only basics
• Relations, object graphs
• Caching, offline
• LINQ like queries
MVVM+S

42. itcampro@ itcamp13# Premium conference on Microsoft technologies
TYPESCRIPT

43. itcampro@ itcamp13# Premium conference 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# Premium conference 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# Premium conference 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# Premium conference on Microsoft technologies
Development &
MobileCode hierarchy
Module
ClassInterface
Fields
Constructors
Properties
Functions

47. itcampro@ itcamp13# Premium conference on Microsoft technologies
TOOLING

48. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• VS 2012, Blend
• WYSIWYG: Dreamweaver, IBM Worklight
IDE

49. itcampro@ itcamp13# Premium conference 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# Premium conference on Microsoft technologies
Development &
Mobile
• Selenium
– UI atutomation
• Unit testing
– Qunit
– Jasmine
• Code coverage
– JSCover
• PhantomJS
– Headless browser
Testing

51. itcampro@ itcamp13# Premium conference 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# Premium conference on Microsoft technologies
Q & A