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/answe...
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...
•Back-End
•Test Spec
•Model
•Controller
•Route
•npm run rest-test
•Front-End
•component
•Action
•Store
•註冊(Action、Store)
•...
https://github.com/exma-square/mobious
GitHub GitBook
http://bit.ly/1PEY0J0
42
QA
43
Thanks
Mobious
Nächste SlideShare
Wird geladen in …5
×

Mobious(ES6 Isomorphic Flux/ReactJS Boilerplate)

305 Aufrufe

Veröffentlicht am

Mobious(ES6 Isomorphic Flux/ReactJS Boilerplate)

Veröffentlicht in: Technologie
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
305
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
7
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Mobious(ES6 Isomorphic Flux/ReactJS Boilerplate)

  1. 1. Mobious ES6 Isomorphic Flux/ReactJS
  2. 2. About Me •Node.js •ASP.NET MVC FB: : Ch Rick Email:mr.sunboss@gmail.com 1
  3. 3. Agenda •Mobious ? •Front-End •Back-End •Example 2
  4. 4. Mobious ES6 Isomorphic Flux/ReactJS 3
  5. 5. Mobious •Front-End •ReactJs •alt •Webpack •Back-End •Koa •Sequelize •Mocha 4
  6. 6. Demo 5
  7. 7. Single-Page App(SPA) 6
  8. 8. SEO Crawler 7
  9. 9. SEO 8
  10. 10. https://developers.facebook.com/docs/sharing/webmasters/crawle Google Facebook https://support.google.com/webmasters/answer/80553 9
  11. 11. User Experience Performance 10
  12. 12. Performance 11
  13. 13. Performance 12
  14. 14. Isomorphic 13
  15. 15. Mobious •Front-End •ReactJs •alt •Webpack •Back-End •Koa •Sequelize •Mocha 14
  16. 16. •app •server •test •webpack 15
  17. 17. Client Server 16
  18. 18. Back-End •Koa •Sequelize •Mocha 17
  19. 19. Koa Web framework 18
  20. 20. Koa 19
  21. 21. Callback hell http://seajones.co.uk/content/images/2014/12/callback-hell.png20
  22. 22. Generator 21
  23. 23. Generator next(); 22
  24. 24. Koa-route 23
  25. 25. Sequelize PostgreSQL、MySQL、MariaDB、SQLite 、MSSQL 24
  26. 26. Sequelize - Define 25
  27. 27. Sequelize - Create 26
  28. 28. Sequelize - Read 27
  29. 29. Sequelize – Destroy 28
  30. 30. Sequelize – Update 29
  31. 31. Controller 30
  32. 32. Controller 31
  33. 33. Controller - koa-route 32
  34. 34. Mocha API Testing、TDD、BDD、Seeding 33
  35. 35. Seeding 34
  36. 36. Seeding - await 35
  37. 37. Mocha 36
  38. 38. Mocah 37
  39. 39. Back-End •Koa •Sequelize •Mocha 38
  40. 40. Example Friend 39
  41. 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. 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. 43. https://github.com/exma-square/mobious GitHub GitBook http://bit.ly/1PEY0J0 42
  44. 44. QA 43
  45. 45. Thanks Mobious

×