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

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

Development &
MobileHuge thanks to our sponsors!

Development &
Mobile
• Why HTML5?
• PhoneGap
• Best practices
• Knockout, Durandal
• Breeze
• TypeScript
• Tooling
Agenda

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

Development &
Mobile
• The Helios story
Background

WHY HTML5?

Development &
Mobile

Development &
Mobile
• Rng 0: today
• Rng1: 2D games, music, video, apps
• Rng2: Next gen, WebGL
Ringmark

Development &
Mobile
• Performance
– The Facebook issue
– The jQuery Mobile issue
• UX?
• 90 percent
Why not?

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

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

PHONEGAP

Development &
MobilePhonegap
PhoneGap === Cordova

Development &
MobileNative

Development &
MobileHybrid

Development &
Mobile
• Accelerometer
• Camera
• Capture : Image, Audio, Video
• Compass
• Contacts
• Connection
• File
• Geolocation
• Media
• Notification
• Storage
• Websocket (Android)
API

Development &
MobilePhonegap build

BEST PRACTICES

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

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

Development &
Mobile
• Benefits
– Fast
– Works offline
– Control over experience
• Caveats
– More Complex
– Memory management
– Modular Strategy
3. Use Single Page Architecture

Development &
Mobile
• Benefits
– Maintainable
– Toolable
– Separation of concerns
• Examples
– Mustache.js
– Handlebars.js
– Underscore.js
4. Use Templates

Development &
Mobile
• Javascript does not give you the right to
disregard SOLID principles
5. Use MV*

Development &
Mobile6. Consider Frameworks

Development &
Mobile
• Leverage the browser stack
7. Routing

Development &
Mobile8. Abstract Device Features
Interaction Mouse Touch
Notification Alert Native
Storage Online Offline
Sensors Unavailable Available

Development &
Mobile
• alert()
• -webkit-touch-callout: none;
• -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
9. Hide HTMLish Behaviors

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

KNOCKOUT AND DURANDAL

Development &
Mobile
• Separation of concerns
• Data binding
– Observable properties
– Observable arrays
– Computed properties
Knockout and MVVM

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

Development &
Mobile
• Separate code into modules
• Load modules on demand
• Bundle, minify, optimize
RequireJS

BREEZE

Development &
Mobile
• CRUD operations are only basics
• Relations, object graphs
• Caching, offline
• LINQ like queries
MVVM+S

TYPESCRIPT

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

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

Development &
Mobile
• exports and imports
• constructor
• extends
• implements
• Interface
• public/private
• … Rest syntax
• => Arrow or lambda functions
• <typename> type conversion
• : assignment
Sintactic sugar

Development &
MobileCode hierarchy
Module
ClassInterface
Fields
Constructors
Properties
Functions

TOOLING

Development &
Mobile
• VS 2012, Blend
• WYSIWYG: Dreamweaver, IBM Worklight
IDE

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

Development &
Mobile
• Selenium
– UI atutomation
• Unit testing
– Qunit
– Jasmine
• Code coverage
– JSCover
• PhantomJS
– Headless browser
Testing

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

Q & A

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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (19)

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

Similaire à ITCamp 2013 - Lorant Domokos - Chasing the one codebase, multiple platforms dream (20)

Plus de ITCamp

Plus de ITCamp (20)

Dernier

Dernier (20)

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