This document discusses Mobious, an ES6 isomorphic Flux/ReactJS framework. It includes sections on the front-end using ReactJS and alt, the back-end using Koa, Sequelize and Mocha, performance and isomorphic capabilities, and an example application with friends data. Setup instructions are provided to clone the Mobious repo and install dependencies to start developing with the step-by-step approach outlined.

1. Mobious
ES6 Isomorphic Flux/ReactJS

2. About Me
•Node.js
•ASP.NET MVC
FB: ： Ch Rick
Email：mr.sunboss@gmail.com
1

3. Agenda
•Mobious ?
•Front-End
•Back-End
•Example
2

4. Mobious
ES6 Isomorphic Flux/ReactJS
3

5. Mobious
•Front-End
•ReactJs
•alt
•Webpack
•Back-End
•Koa
•Sequelize
•Mocha
4

6. Demo
5

7. Single-Page App(SPA)
6

8. SEO
Crawler
7

9. SEO
8

10. https://developers.facebook.com/docs/sharing/webmasters/crawle
Google Facebook
https://support.google.com/webmasters/answer/80553
9

11. User Experience
Performance
10

12. Performance
11

13. Performance
12

14. Isomorphic
13

15. Mobious
•Front-End
•ReactJs
•alt
•Webpack
•Back-End
•Koa
•Sequelize
•Mocha
14

16. •app
•server
•test
•webpack
15

17. Client Server
16

18. Back-End
•Koa
•Sequelize
•Mocha
17

19. Koa
Web framework
18

20. Koa
19

21. Callback hell
http://seajones.co.uk/content/images/2014/12/callback-hell.png20

22. Generator
21

23. Generator next();
22

24. Koa-route
23

25. Sequelize
PostgreSQL、MySQL、MariaDB、SQLite 、MSSQL
24

26. Sequelize - Define
25

27. Sequelize - Create
26

28. Sequelize - Read
27

29. Sequelize – Destroy
28

30. Sequelize – Update
29

31. Controller
30

32. Controller
31

33. Controller - koa-route
32

34. Mocha
API Testing、TDD、BDD、Seeding
33

35. Seeding
34

36. Seeding - await
35

37. Mocha
36

38. Mocah
37

39. Back-End
•Koa
•Sequelize
•Mocha
38

40. Example
Friend
39

41. •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

42. •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

43. https://github.com/exma-square/mobious
GitHub GitBook
http://bit.ly/1PEY0J0
42

44. QA
43

45. Thanks
Mobious