Date post: | 08-May-2015 |
Category: |
Technology |
Upload: | itcamp |
View: | 606 times |
Download: | 2 times |
itcampro@ itcamp13# Premium conference on Microsoft technologies
Chasing the one codebase, multiple platforms dream
Lorant Domokos
Fortech
Microsoft Student Partners
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHuge thanks to our sponsors!
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Why HTML5?
• PhoneGap
• Best practices
• Knockout, Durandal
• Breeze
• TypeScript
• Tooling
Agenda
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• The Helios story
Background
itcampro@ itcamp13# Premium conference on Microsoft technologies
WHY HTML5?
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Rng 0: today
• Rng1: 2D games, music, video, apps
• Rng2: Next gen, WebGL
Ringmark
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Performance
– The Facebook issue
– The jQuery Mobile issue
• UX?
• 90 percent
Why not?
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
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
PHONEGAP
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobilePhonegap
PhoneGap === Cordova
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileNative
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHybrid
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobilePhonegap build
itcampro@ itcamp13# Premium conference on Microsoft technologies
BEST PRACTICES
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
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
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
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Javascript does not give you the right to
disregard SOLID principles
5. Use MV*
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile6. Consider Frameworks
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Leverage the browser stack
7. Routing
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile8. Abstract Device Features
Interaction Mouse Touch
Notification Alert Native
Storage Online Offline
Sensors Unavailable Available
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
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
KNOCKOUT AND DURANDAL
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Separation of concerns
• Data binding
– Observable properties
– Observable arrays
– Computed properties
Knockout and MVVM
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Separate code into modules
• Load modules on demand
• Bundle, minify, optimize
RequireJS
itcampro@ itcamp13# Premium conference on Microsoft technologies
BREEZE
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• CRUD operations are only basics
• Relations, object graphs
• Caching, offline
• LINQ like queries
MVVM+S
itcampro@ itcamp13# Premium conference on Microsoft technologies
TYPESCRIPT
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
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
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileCode hierarchy
Module
ClassInterface
FieldsConstructors
PropertiesFunctions
itcampro@ itcamp13# Premium conference on Microsoft technologies
TOOLING
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• VS 2012, Blend
• WYSIWYG: Dreamweaver, IBM Worklight
IDE
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
Mobile
• Selenium
– UI atutomation
• Unit testing
– Qunit
– Jasmine
• Code coverage
– JSCover
• PhantomJS
– Headless browser
Testing
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
itcampro@ itcamp13# Premium conference on Microsoft technologies
Q & A