Mobious(ES6 Isomorphic Flux/ReactJS Boilerplate)

MobiousES6 Isomorphic Flux/ReactJS

About Me

•Node.js•ASP.NET MVC

FB: ： Ch RickEmail ：mr.sunboss@gmail.com

1

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