Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz...

Texte

David Delavennat • Centre de Mathématiques Laurent Schwartz

Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754

Electron

Développement d’Application Multi-Plateforme

Cordova

Node.js

Flight Plan

2

Licence

3

4

http://docs.sencha.com/extjs/6.2.0/guides/quick_start/introduction.html http://docs.sencha.com/extjs/6.2.0/index.html

http://docs.sencha.com/extjs/6.2.0/guides/application_architecture/developing_for_multiple_screens_and_environments.html

http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/theming.html http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/material_theme.html

http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/accessibility.html http://docs.sencha.com/extjs/6.2.0/guides/backend_connectors/direct/specification.html

https://www.sencha.com/blog/creating-installable-desktop-applications-with-ext-js-and-electron

Documentation

5

Model / Schema

Serialized data

Store

Proxy

Record

}Abstract sources

}Modelized data

Terminology

6

Terminology

Design Pattern MVC

7

Model ViewController

Proxy

Storeload

AJAX

update

commit

WebUI

Web Service

ModelController Data

SQL LDAP noSQL

load

View

commit

Design Pattern MVVM

8

Model

View

ViewModelStoreload

AJAX

update

commit

WebUI

Web Service

ModelController Dataload

commit

ViewControllerevent

SQL LDAP noSQL

View

Proxy

Two-way Data-Binding

9

Model

ViewModel

View 1 View 2

http://docs.sencha.com/extjs/5.1/application_architecture/view_models_data_binding.htmlhttp://dev.sencha.com/ext/5.1.0/examples/kitchensink/?theme=crisp#data-binding

johnnamecivilityname john

M.

Architecture > Two-way Data-Binding

10

http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.app.ViewModel-cfg-stores http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.app.bind.Formula

Architecture > Routers

11http://docs.sencha.com/extjs/5.1/application_architecture/router.html

• Routes • before • action • conditions • after • unmatched • multi-route #service/email|calendar

Sencha cmd

12http://docs.sencha.com/extjs/5.1/application_architecture/application_architecture.htmlhttp://docs.sencha.com/extjs/5.1/getting_started/getting_started.html http://dev.sencha.com/ext/5.0.0/examples/ticket-app/index.html

Sencha cmd -> create app

13

Sencha cmd -> choose sdk

14

Sencha cmd -> code

15

CORS

http://www.sencha.com/blog/optimizing-the-development-process-with-sencha-cmd-5

Sencha cmd -> build app

16

Cordova

Cordova• Dependencies

• https://nodejs.org/en/download/ • Installation

• npm install -g cordova • Project creation

• cordova create hello com.example.hello HelloWorld • Project building

• cd hello && cordova platform add android —save • cordova build android

• Project running • cordova run android

• Use plugins • cordova plugin ls

• cordova-plugin-camera 2.1.0 "Camera" • cordova-plugin-whitelist 1.2.1 "Whitelist"

• Icon customization • http://cordova.apache.org/docs/en/latest/config_ref/images.html

Cordova

Electron

Electron

• Build cross platform desktop apps with JavaScript, HTML, and CSS • https://github.com/electron/electron

• Install electron • https://github.com/electron-userland/electron-prebuilt

• Package your apps • https://github.com/electron-userland/electron-packager

• Deploy your apps • https://github.com/electron-userland/electron-builder

Electron• Dependencies

• https://nodejs.org/en/download/ • Installation

• npm install electron -save • npm install electron-packager —save-dev • npm install electron-builder —save-dev

• Project loading • npm start

• Project building • npm run-script build

• Icon customization • http://cordova.apache.org/docs/en/latest/config_ref/images.html

}mutually exclusive

Electron

Electron

Ubuntu 14.04 - amd64

Scientific Linux 6.2 - x86

Centos 7 - amd64

Electron

Electron

Electron

Electron

29

Electron

30

Hack time! : micro service

anf2016 $ ruby bin/server.rb

anf2016 $ bundle

http://localhost:4567/indico/event/4http://localhost:4567/indico/event/4?start=1&limit=15

http://localhost:4567/indico/event/rawhttp://localhost:4567/indico/event

31

Hack time! : Applicationanf2016 $ rake electron:builder anf2016 $ cd src/starterapp anf2016/src/starterapp $ sencha app watch

anf2016 $ cp -Rv data/src/starterapp src/starterapp anf2016 $ cp -Rv data/stc/startapp src/

http://localhost:4567/dev/index.html

anf2016 $ ruby bin/server.rb

http://localhost:4567/index.htmlanf2016/src/starterapp $ sencha app build