Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A static website with React? Really? @dotJS 2016

A static website with React? Really? @dotJS 2016

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 or CSS-in-JS 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?

Maxime Thirouin

December 04, 2016

More Decks by Maxime Thirouin

Other Decks in Technology


  1. @MoOx @dotJS 2016 you might want to use a static

    website generator. If you want a low cost solution that is performant for your users,
  2. @MoOx @dotJS 2016 The one that allows you to improve

    the quality of your code with unit testing and type checking.
  3. @MoOx @dotJS 2016 The one that can be used universally,

    in node, in a browser, even on a native app.
  4. @MoOx @dotJS 2016 React, webpack, Flow, CSS modules, and literally

    anything from npm Let’s say you can build your website with
  5. @MoOx @dotJS 2016 Some solutions, like metalsmith can offer a

    fraction of that, but they just render a dumb string.
  6. @MoOx @dotJS 2016 In these cases, React doesn’t kick in

    on the client, so your `onClick` events are ignored …
  7. @MoOx @dotJS 2016 I tried to hack my way into

    it I ended up creating a athoner kind of generator.
  8. @MoOx @dotJS 2016 phenomic = (content) => webpack( <Layout>{ content

    }</Layout> ) If you represent Phenomic simply, it’s basically a function that takes your content and transforms it through webpack and react and makes a website out of it.
  9. @MoOx @dotJS 2016 Your content can be written in Markdown,

    LaTex, HTML, JSON… Basically any format
  10. @MoOx @dotJS 2016 At build time, Phenomic render each page

    as a static HTML file. The result is a website completely SEO friendly that will work for the two people in the whole world who disabled JS.
  11. @MoOx @dotJS 2016 The big difference when JS is on

    is that when the user navigates, it just loads the minimal data-requirements.
  12. @MoOx @dotJS 2016 a small chunk of JS containing its

    data. In fact, for each page, Phenomic also creates
  13. @MoOx @dotJS 2016 With this, you can finally offer real-smooth

    page transitions, without the hacky "pjax" solution.
  14. @MoOx @dotJS 2016 If you deliver your website over HTTPs,

    you have a progressive web app. Service Worker included
  15. @MoOx @dotJS 2016 You will be able to generate a

    static version of a Wordpress website.
  16. @MoOx @dotJS 2016 built in search. This is really amazing

    on a static website. We’re going to make an index at build time, so you can add a static search without relying on an external service. Another thing we’re working on is
  17. @MoOx @dotJS 2016 Phenomic is a static website generator that

    wants developers and writers to be happy.
  18. @MoOx @dotJS 2016 As it’s a project by and for

    developers, we’d be really happy to receive your input and contributions.