Tweet
Tweet

Slide 1

Slide 1 text

Experience in building isomorphic app @lyforever
 reactjs-tw 3rd party http://bit.ly/reactjstw-3-ly

Slide 2

Slide 2 text

LY WATCHOUT CO. 2 YEARS IN NODEJS GITHUB.COM/YHSIANG

Slide 3

Slide 3 text

Old Experience

Slide 4

Slide 4 text

Database Routing Controller View DOM / AJAX / UX Client Server JS PHP Ruby Python Java Server-side render

Slide 5

Slide 5 text

Most Popular Right Now

Slide 6

Slide 6 text

Database Routing Controller View DOM / AJAX / UX Client Server JS PHP Ruby Python Java Client-side render

Slide 7

Slide 7 text

What’s problem?

Slide 8

Slide 8 text

Download
 Skeleton Download
 Javascript Evaluate
 Javascript Fetch
 Data Client-side render flow High Latency But … ?

Slide 9

Slide 9 text

Performance SEO First loading Content for crawlers Preload Prerender Solved

Slide 10

Slide 10 text

Server-side render flow Download
 Full HTML Download
 Javascript Evaluate
 Javascript Fetch
 Data Low Latency But … ?

Slide 11

Slide 11 text

if isomorphic?

Slide 12

Slide 12 text

Database Routing Controller View DOM / AJAX / UX Client Server JS PHP Ruby Python Java Isomorphic render

Slide 13

Slide 13 text

Isomorphic render flow Low latency and UX is like SPA Download
 Full HTML Download
 Javascript Evaluate
 Javascript Fetch
 Data

Slide 14

Slide 14 text

I got a chance! Challenge in Watchout

Slide 15

Slide 15 text

I got a chance! Because users of partner USE IE8

Slide 16

Slide 16 text

How We Start?

Slide 17

Slide 17 text

Teammate said: 我不會 PHOTOSHOP …

Slide 18

Slide 18 text

Teammate said: 我不會 PHOTOSHOP … BUT 她寫得⼀一⼿手好 angular

Slide 19

Slide 19 text

Angular Mockup

Slide 20

Slide 20 text

Policies Mockup

Slide 21

Slide 21 text

Policy Mockup

Slide 22

Slide 22 text

Then Reactjs!

Slide 23

Slide 23 text

Directory Structure client/ server/ src/ styles/ scripts/ webpack.config.js api/ render/ server.js components/ pages/ stores/ app.js app_router.js images, fonts, css files api - use Mongo
 render - require(‘../src/app_router’) reactjs & flux

Slide 24

Slide 24 text

Client Side First

Slide 25

Slide 25 text

Client Side First

Slide 26

Slide 26 text

Components First

Slide 27

Slide 27 text

Components Button.js Question.js QuestionList.js Policy.js PolicyBox.js PolicyList.js QuestionCompose.js Button.js Navigation.js Notification.js SiderBar.js Footer.js then use pages/ compose them

Slide 28

Slide 28 text

Webpack Bundle CommonJS/AMD For You require(‘../styles/main.css’); loaders: css-loader, file-loader, url-loader, jsx-loader HTMLWebPackPlugin ExtractTextWebpackPlugin

Slide 29

Slide 29 text

Webpack - magic 1 require("es5-shim/es5-shim"); require("es5-shim/es5-sham"); require("../../node_modules/html5shiv/dist/html5shiv.js");

Slide 30

Slide 30 text

Adding Flux dispatcher/ stores/ actions/ constants/ QuestionStore.js CandidateStore.js PolicyStore.js AppActionCreators.js Single Source of Truth

Slide 31

Slide 31 text

Server-side Render Add server/ api.js render.js Router.renderRoutesToString(router, path, function (output) {
 var html = template.replace($BODY, output);
 … replace title, description …
 res.send(html);
 }); react-router 0.10.2

Slide 32

Slide 32 text

Superagent same as server and client getQuestions ( query, cb) {
 request
 .get(makeURL(‘/questions’)
 .query(query)
 .timeout(TIMEOUT)
 .end(function ( err, res) { 
 … deal res …
 });
 }

Slide 33

Slide 33 text

Authentication express-session
 passport-session getToken …

Slide 34

Slide 34 text

Before isomorphic http://taipei.wethepeople.tw/#!/

Slide 35

Slide 35 text

Before isomorphic

Slide 36

Slide 36 text

When isomorphic http://2014final.wethepeople.tw/

Slide 37

Slide 37 text

What I Learn components vs pages angularjs to reactjs workflow :p environment vars e.g. req.path / window.location.pathname req.header / document.cookie

Slide 38

Slide 38 text

Deployment Dockerfile Makefile git push build docker docker run

Slide 39

Slide 39 text

⼯工商服務 沃草 持續 徵⼈人中 圖⽂文創作者, 編輯, ⼯工程師 [email protected]

Slide 40

Slide 40 text

Thank you https://www.facebook.com/groups/ reactjs.tw/ Welcome ! Ref: http://bit.ly/isomorphic-jsconfasia2014