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


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


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


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

FieldsConstructors

PropertiesFunctions


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

Technology