mobious(es6 isomorphic flux/reactjs boilerplate)
TRANSCRIPT
MobiousES6 Isomorphic Flux/ReactJS
Agenda•Mobious ?•Front-End•Back-End•Example
2
MobiousES6 Isomorphic Flux/ReactJS
3
Mobious•Front-End• ReactJs• alt•Webpack•Back-End• Koa• Sequelize• Mocha
4
Demo
5
Single-Page App(SPA)
6
SEOCrawler
7
SEO
8
https://developers.facebook.com/docs/sharing/webmasters/crawler
Google Facebook
https://support.google.com/webmasters/answer/80553
9
User Experience
Performance
10
Performance
11
Performance
12
Isomorphic
13
Mobious•Front-End• ReactJs• alt•Webpack•Back-End• Koa• Sequelize• Mocha
14
•app•server•test•webpack
15
Client Server
16
Back-End•Koa•Sequelize•Mocha
17
KoaWeb framework
18
Koa
19
Callback hell
http://seajones.co.uk/content/images/2014/12/callback-hell.png20
Generator
21
Generator next();
22
Koa-route
23
Sequelize
PostgreSQL 、 MySQL 、 MariaDB 、 SQLite 、 MSSQL
24
Sequelize - Define
25
Sequelize - Create
26
Sequelize - Read
27
Sequelize – Destroy
28
Sequelize – Update
29
Controller
30
Controller
31
Controller - koa-route
32
Mocha API Testing 、 TDD 、 BDD 、 Seeding
33
Seeding
34
Seeding - await
35
Mocha
36
Mocah
37
Back-End•Koa•Sequelize•Mocha
38
Example
Friend
39
•git clone https://github.com/exma-square/mobious.git•cd mobious•git checkout develop•nvm ls-remote•nvm use 2.0.1•npm install•npm run dev
40
Step-by-Step
•Back-End• Test Spec• Model• Controller• Route• npm run rest-test
•Front-End• component• Action• Store• 註冊 (Action 、 Store)• 回來 component 寫 willMount 從 Action 取資料
41
Step-by-Step
https://github.com/exma-square/mobious
GitHub GitBook
http://bit.ly/1PEY0J0
42
QA
43
ThanksMobious