A static website with React? Really?

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

2f6c2dcd4ba8fc44f1e7f0b2ed3d587d?s=128

Maxime Thirouin

May 25, 2016
Tweet

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.