Experience in building isomorphic app

How to build an isomorphic app.
Present in reactjs.tw 3rd party @CLBC flagship
Demo: http://2014final.wethepeople.tw

Transcript

1. Experience in building isomorphic app @lyforever
 reactjs-tw 3rd party http://bit.ly/reactjstw-3-ly
2. LY WATCHOUT CO. 2 YEARS IN NODEJS GITHUB.COM/YHSIANG
3. Old Experience
4. Database Routing Controller View DOM / AJAX / UX Client Server JS PHP Ruby Python Java Server-side render
5. Most Popular Right Now
6. Database Routing Controller View DOM / AJAX / UX Client Server JS PHP Ruby Python Java Client-side render
7. What’s problem?
8. Download
 Skeleton Download
 Javascript Evaluate
 Javascript Fetch
 Data Client-side render flow High Latency But … ?
9. Performance SEO First loading Content for crawlers Preload Prerender Solved
10. Server-side render flow Download
 Full HTML Download
 Javascript Evaluate
 Javascript Fetch
 Data Low Latency But … ?
11. if isomorphic?
12. Database Routing Controller View DOM / AJAX / UX Client Server JS PHP Ruby Python Java Isomorphic render
13. Isomorphic render flow Low latency and UX is like SPA Download
 Full HTML Download
 Javascript Evaluate
 Javascript Fetch
 Data
14. I got a chance! Challenge in Watchout
15. I got a chance! Because users of partner USE IE8
16. How We Start?
17. Teammate said: 我不會 PHOTOSHOP …
18. Teammate said: 我不會 PHOTOSHOP … BUT 她寫得⼀一⼿手好 angular
19. Angular Mockup
20. Policies Mockup
21. Policy Mockup
22. Then Reactjs!
23. 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
24. Client Side First
25. Client Side First
26. Components First
27. 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
28. Webpack Bundle CommonJS/AMD For You require(‘../styles/main.css’); loaders: css-loader, file-loader, url-loader, jsx-loader HTMLWebPackPlugin ExtractTextWebpackPlugin
29. Webpack - magic 1 require("es5-shim/es5-shim"); require("es5-shim/es5-sham"); require("../../node_modules/html5shiv/dist/html5shiv.js");
30. Adding Flux dispatcher/ stores/ actions/ constants/ QuestionStore.js CandidateStore.js PolicyStore.js AppActionCreators.js Single Source of Truth
31. 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
32. Superagent same as server and client getQuestions ( query, cb) {
 request
 .get(makeURL(‘/questions’)
 .query(query)
 .timeout(TIMEOUT)
 .end(function ( err, res) { 
 … deal res …
 });
 }
33. Authentication express-session
 passport-session getToken …
34. Before isomorphic http://taipei.wethepeople.tw/#!/
35. Before isomorphic
36. When isomorphic http://2014final.wethepeople.tw/
37. What I Learn components vs pages angularjs to reactjs workflow :p environment vars e.g. req.path / window.location.pathname req.header / document.cookie
38. Deployment Dockerfile Makefile git push build docker docker run
39. ⼯工商服務 沃草 持續 徵⼈人中 圖⽂文創作者, 編輯, ⼯工程師 spicycop@gmail.com
40. Thank you https://www.facebook.com/groups/ reactjs.tw/ Welcome ! Ref: http://bit.ly/isomorphic-jsconfasia2014