Mobious
ES6 Isomorphic Flux/ReactJS
About Me
•Node.js
•ASP.NET MVC
FB: : Ch Rick
Email:mr.sunboss@gmail.com
1
Agenda
•Mobious ?
•Front-End
•Back-End
•Example
2
Mobious
ES6 Isomorphic Flux/ReactJS
3
Mobious
•Front-End
•ReactJs
•alt
•Webpack
•Back-End
•Koa
•Sequelize
•Mocha
4
Demo
5
Single-Page App(SPA)
6
SEO
Crawler
7
SEO
8
https://developers.facebook.com/docs/sharing/webmasters/crawle
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
Koa
Web 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
Thanks
Mobious

Mobious(ES6 Isomorphic Flux/ReactJS Boilerplate)