Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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)

315 Aufrufe

Veröffentlicht am

Mobious(ES6 Isomorphic Flux/ReactJS Boilerplate)

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×