multiplatform hybrid development

47
MULTIPLATFORM HYBRID DEVELOPMENT Darko Kukovec JavaScript developer at . @DarkoKukovec

Upload: darko-kukovec

Post on 14-Jul-2015

253 views

Category:

Technology


0 download

TRANSCRIPT

MULTIPLATFORM HYBRID DEVELOPMENT

Darko Kukovec JavaScript developer at .

@DarkoKukovec

/ 47

HYBRID APPS• Web technologies + native wrapper

2

/ 47

WHY HYBRID DESKTOP APPS?

3

/ 47

WHY HYBRID DESKTOP APPS?

• You don’t want to do it multiple times

• You already probably know JavaScript

• and HTML, CSS

4

/ 47

WHY HYBRID DESKTOP APPS?• Atwood's Law:

“any application that can be written in JavaScript, will eventually be written in JavaScript”

5

/ 47

OUR EXPERIENCE

• A lot of mobile hybrid apps

• A few special cases

6

/ 47

DESKTOP HYBRID APP 1

• Kiosk style app

• 40” touchscreen TV

• Windows (+ OSX)

7

/ 47

DESKTOP HYBRID APP 2• Users install it on their computers

• Windows + OSX

• Optical drive access

• Cryptography

• Auto-updateable

• Rewrite of an app made with Adobe Air and CoffeScript8

/ 47

MULTIPLATFORM HYBRID APP• Kiosk style app

• Windows + iPads + Android tablets (+ OSX)

• Works with 3 different APIs

• Communication with card readers

• Rewrite of an app made for iPads in Sencha Touch9

/ 4710

MULTIPLATFORM HYBRID APP

/ 47

Wrappers

Applications

Automation

11

/ 47

WRAPPERS

12

/ 47

DESKTOP WRAPPERS

• Adobe Air

• QT

• Chrome Apps

• app.js

13

/ 47

OUR CHOICE

• node-webkit

• chromium (38) + node.js (0.11)

• Windows + Linux + OSX

14

/ 47

NODE-WEBKIT PROS• Fast development

• A LOT of node.js modules

• 99% of the time using existing technologies

• GUI specific APIs

• Chrome DevTools15

/ 47

NODE-WEBKIT PROS• Distributed as

• exe with a few additional dlls

• regular OSX app

• Updating

• The whole exe

• generic exe + application package (package.nw)16

/ 47

NODE-WEBKIT CONS

• Some builds can be unstable

• Refreshing the page doesn’t clear the DOM/memory (learned this the hard way)

• No built-in auto update

17

/ 47

HONORABLE MENTION• Atom shell

• Some differences, e.g.

• node-webkit entry point is html

• atom shell entry point is JavaScript

• Better suited for multi window apps18

/ 47

MOBILE WRAPPERS

• PhoneGap / Cordova

• Custom

19

/ 47

OUR CHOICE• Custom wrapper

• Specific requirements

• HTML/JS/CSS is on server, not on the device

• Communication with different card readers

• Swipe / RFID20

/ 47

CUSTOM WRAPPER• Pros

• Easily customisable

• Complete control

• Cons

• Less features

• More time, native app developers21

/ 47

OUR RECOMMENDATION• Cordova

• It just works (most of the time)

• Battle tested

• A lot of plugins

• No need for a native developers (most of the time)

• No need to reinvent the wheel22

/ 47

AUTO-UPDATING• Kiosk apps

• Desktop

• Mini server in node-webkit

• API server calls the app with a package download URL

• App downloads the package and restarts itself

• Tablet

• Update the code on the server

• Refresh the app (manually for now)23

/ 47

• Desktop app

• OSX

• Apps are folders

• App files aren’t locked while running

• App downloads the update, unzips it, and recursively copies the files

• Windows

• App files locked while running

AUTO-UPDATING

24

/ 47

• Option A: Download the update, run a bat script that would copy the files once the app closes, and starts the app again

• Significant chance it will be blocked by Antivirus software

WINDOWS AUTO-UPDATING

25

/ 47

• Option B: Download an installer and prompt the user to install the update

• Requires the user to do some work

26

WINDOWS AUTO-UPDATING

/ 47

APPLICATION

27

/ 47

APPLICATIONS

• Backbone.js + Require.js + SCSS + Handlebars

• Yeoman, Bower

28

/ 47

CODE QUALITY• JS Hint

• SCSS Linter

• Developers are lazy - force linting

• Git commit hooks

• Application building

• During the development

• Code editor integration

29

/ 47

(AUTOMATED) CODE REVIEW

• Hosted

• Code climate

• Codacy

• Plato

30

/ 47

VERSIONING• Git

• Git flow

• master - always production-ready

• develop - latest development changes

• feature - branches for specific features

• release, hotfix31

/ 47

GIT FLOW

32

/ 47

AUTOMATION

33

/ 47

–Addy Osmani

“Automation isn’t about being lazy.It’s about being efficient.”

34

/ 47 http://xkcd.com/1205/35

/ 47

WHY USE A TASK RUNNER?

• Improve quality

• Ship faster

• Easily repeatable

36

/ 47

TASK RUNNERS• Make

• Ant

• Maven

• …

• Grunt

• Gulp

• npm, broccoli, cake, …37

/ 47

GRUNT

• ~3600 plugins

• > 2 years old

38

/ 47

GULP

• ~ 800 plugins

• > 1 year old

39

/ 47

GRUNT VS. GULP• Grunt

• Based on files

• Configuration over code

• Gulp

• Based on streams

• Code over configuration40

/ 47

OUR CHOICE

• Grunt

• Gulp didn’t exist yet

• Grunt - big community, a lot of plugins

• Gulp - easier to use, fast growing community

http://xkcd.com/1445/41

/ 47

SOME TASK EXAMPLES• develop

• starts server

• livereload

• watch

• compass

• SCSS Linter

• JS Hint

• compile templates42

/ 47

SOME TASK EXAMPLES• commit hooks

• husky grunt plugin

• SCSS Linter

• JS Hint

• Tests?

• Automated code review?43

/ 47

• build

• the usual

• linters

• compass

• concatenate

• minify

• revision

SOME TASK EXAMPLES

44

/ 47

• build

• kiosk

• zip onto package.nw

• update the test kiosk (curl)

• notify

• desktop app

• make and sign OS X app

• make dmg

• prepare bat script for Windows

SOME TASK EXAMPLES

45

/ 47 http://xkcd.com/1319/46

/ 4747