Post on 18-Apr-2020
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