A static website with React? Really?

Imagine you need a static website for a small website, a documentation or a corporate website. Why a static website? Because static is the new dynamic. It’s unhackable. It’s performant. And it has more to offer than you can imagine. But the thing is: you work with the React ecosystem and CSS Modules everyday and don’t want to write boring HTML templates and dangerous CSS selectors. You are a modern front-end developer and you don't really want to install Ruby or Python to build silly static HTML pages. You just want to use the tools you've grown to love. You want to get the same DX (developer experience) that React ecosystem offers you on a daily basis. You want to enjoy hot loading while you will work on your website. What if I told you that you could reuse all the unit tested React components that you will find on npm to make your isomorphic/universal static website? What if I told you that this website will be static but dynamic at the same time? What if I told you that you can even offer the UX of a progressive web app?

VIDEO AVAILABLE HERE https://vimeo.com/168480208

Transcript

1. @MoOx A static website with React? 1 Really? @MoOx
2. @MoOx @MoOx Front-End/UI Developer Freelance https://moox.io/ 2
3. @MoOx 3 Putain de code ! github.com/MoOx
4. @MoOx 4 Let’s say you need a website. Personal website, documentation, corporate website etc
5. @MoOx 5 Wordpress and Drupal are the most used CMS. “WordPress powers 25% of the internet”
6. @MoOx 6 But…
7. @MoOx 7 Security Problem 1
8. @MoOx 8 #PanamaPapers http://www.theregister.co.uk/2016/04/07/ panama_papers_unpatched_wordpress_drupal/
9. @MoOx 9 http://codex.wordpress.org/ FAQ_My_site_was_hacked
10. @MoOx 10 You need to keep your website up to date
11. @MoOx 11 Reliability Problem 2
12. @MoOx 12 “Database connection error.”
13. @MoOx 13 How many plugins and commercial solutions exist just to scale a Wordpress website?
14. @MoOx 14 TOO MANY
15. @MoOx 15 Client Server → ← 90’s model Browsers are document readers. Every interaction happen on the server.
16. @MoOx 16 https://speakerdeck.com/biilmann/the-jam-stack
17. @MoOx 17 Performance Problem 3
18. @MoOx 18 Facebook instant article Google AMP … Performance sucks This things are a threat to the open web
19. @MoOx 19 Workarounds?
20. @MoOx 20
21. @MoOx 21 https://vip.wordpress.com/our-services/
22. @MoOx 22 Building secure, reliable and fast websites is hard and expensive
23. @MoOx 23 “There has to be another way”
24. @MoOx 24 “Build and serve” instead of “Build on serve”
25. @MoOx 25 Tooling is good.
26. @MoOx 26 https://speakerdeck.com/biilmann/the-jam-stack
27. @MoOx 27 KISS Keep It Simple and Stupid
28. @MoOx 28 Static websites, really?
29. @MoOx 29 1. Content 2. Templates 3. Build step 4. Deploy step Developer / Publisher
30. @MoOx 30 User Experience 1. Request 2. Builded content from CDN 3. (Enhancement from external APIs)
31. @MoOx 31 Why static? Secure Simple Fast Cheap
32. @MoOx 32
33. @MoOx 33 Many examples are not static websites. http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
34. @MoOx 34 Those websites are highly dynamic.
35. @MoOx 35 These days, websites and SPA are not that different.
36. @MoOx 36 Lot’s of websites are hybrid. Enhanced with JavaScript. Usage of APIs for some parts Usage of third party services.
37. @MoOx 37 SPA are not SPA anymore. Respond to URLs, good browser history, pre-rendering… And,
38. @MoOx 38 It’s just (web) apps.
39. @MoOx 39 The JAM stack is the modern way for building websites and apps.
40. @MoOx 40 http://jamstack.org/
41. @MoOx 41 JAM stands for JavaScript, APIs and Markup.
42. @MoOx 42 • No more expensive dynamic servers • Focused on front-end hosted on a CDN • Use APIs for any moving parts. It's the fastest growing new stack for building websites and apps The JAM stack is the stack for this new reality. Instead of FTPing server-side code to a shared server, we push to git and our code is instantly built and distributed onto CDN nodes across the world. Instead of depending on a database for every request we serve, we use build tools to ship full sites and apps ready to run directly in the browser. Instead of mixing persistence, HTML generation, credit-card transactions, authentication, etc, all together, we separate these concerns and consume well defined APIs from our front-end.
43. @MoOx 43 It’s not a trend.
44. @MoOx 44 Server-less* architectures are growing. (Apex, $ now cli tool)
45. @MoOx 45 CDN is not a luxury anymore.
46. @MoOx 46 CI and CD is easy
47. @MoOx 47 Web is constantly evolving.
48. @MoOx 48 Now, it’s 2016 and you are going to make a website
49. @MoOx 49 { "name": "JAMStack", "version": "1.0.0", "description": "The website for jamstack.org", "main": "gulpfile.js", "scripts": { "build": "./node_modules/.bin/gulp build", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "MIT", "dependencies": { "gulp": "^3.9.1", "gulp-front-matter": "^1.3.0", "gulp-layout": "0.0.3", "gulp-markdown": "^1.2.0", "jade": "^1.11.0" } } https://github.com/jamstack/jamstack.org/blob/master/package.json
50. @MoOx 50 # Markdown
51. @MoOx 51 (WYSIWYG is not what you get)
52. @MoOx 52 The Best Interface is No Interface http://www.nointerface.com/
53. @MoOx 53 Text format that can offer nice **UX** for _writers_.
54. @MoOx 54 Markdown is simple to parse and transform remark (mdast), markdown-it…
55. @MoOx 55 # Layout & templating
56. @MoOx 56 ⛔
57. @MoOx 57 Text is error prone. We are human, we make mistakes. Handlebars and friends allow us to produce wrong HTML.
58. @MoOx 58 And even if your HTML is correct, you need to sync it with your JavaScript that will enhance the UX.
59. @MoOx 59 You test your code, right? If not you should.
60. @MoOx 60 Testing “HTML apps” that rely on JavaScript is painful and slow.
61. @MoOx 61 Testing JavaScript apps can be easy
62. @MoOx 62 Template > 1 language Text > 1 language Data > 1 language Back-end > 1 language + 1 package manager Front-end > 1 language + 1 package manager Most static website generator stack
63. @MoOx 63 Template > 1 language Text > 1 language Data > 1 language Back-end > 1 language + 1 package manager Front-end > 1 language + 1 package manager Most static website generator stack
64. @MoOx 64 More than 400 static website generators are available
65. @MoOx 65 KISS Keep It Simple and Stupid
66. @MoOx 66
67. @MoOx 67 JAVASCRIPT
68. @MoOx 68
69. @MoOx 69 1. You work with the React ecosystem and CSS Modules everyday and don’t want to write boring HTML templates and dangerous CSS selectors. 2. You are a modern front-end developer and you don't really want to install Ruby or Python to build silly static HTML pages. 3. You just want to use the tools you've grown to love. You want to get the same DX (developer experience) that React ecosystem offers you on a daily basis. You want to enjoy hot loading while you will work on your website.
70. @MoOx 70 What if I told you that you could reuse all the unit tested React components that you will find on npm to make your isomorphic/universal static website? What if I told you that this website will be static but dynamic at the same time? What if I told you that you can even offer the UX of a progressive web app?
71. @MoOx 71 https://xkcd.com/927/
72. @MoOx 72 REACT
73. @MoOx 73
74. @MoOx 74 https://phenomic.io
75. @MoOx 75 Goal Simple (like React) Reliable (easily testable) Fast UX Flexible
76. @MoOx 76 Programming > JavaScript (node, browser) + npm Text > 1 language of your choice (default to Markdown) Data > 1 language of your choice (JSON, Yaml…) Simple and Flexible
77. @MoOx 77 You can just grab some packages on the npm ecosystem to help you build your website, blog or even a small app. React and npm ecosystem
78. @MoOx 78 Isomorphic/Universal by default. All pages are available as HTML (works with no JavaScript) but user can get an enhanced navigation (when JavaScript is on).
79. @MoOx 79 No reload between pages, enjoy a smooth navigation. Fast UX
80. @MoOx 80 Live-edit for content, layouts and any UI elements thanks to React Hot Loader. Visual errors. Setup and start in few minutes Awesome DX
81. @MoOx 81 1 command to setup a website or webapp in a minute. 1 command to write and develop. 1 command to build, optimise and publish (static files). Awesome DX
82. @MoOx 82 Highly capable by default Offline mode (Servicer Worker and/or Appcache) Blog capabilities RSS
83. @MoOx 83 Modern syntax (ES2015 and more via Babel, PostCSS / cssnext) CSS Modules Strong linting rules for JS (ESLint) and CSS (Stylelint) No global npm package required Good defaults
84. @MoOx 84 Full control (on almost anything) Any text engine accepted (default to markdown) Normal Webpack configuration React-Router routes Freedom
85. @MoOx 85 Current Roadmap [WIP] Pre-render all routes (eg: tags & categories pages) [WIP] Pagination Built-in Search and easy way to use third party like Algolia Minimalist Admin
86. @MoOx 86 One more thing… In a very near future, you will be able to use Phenomic without static content, just to pre-render your routes as App Shell.
87. @MoOx Questions ? 87 I don’t bite.