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?

2f6c2dcd4ba8fc44f1e7f0b2ed3d587d?s=128

Maxime Thirouin

December 04, 2016
Tweet

Transcript

  1. @MoOx @dotJS 2016 https://phenomic.io A static website with React? Really?

  2. @MoOx @dotJS 2016 build a website. Let's say you have

    to
  3. @MoOx @dotJS 2016 It can be a blog, a documentation

    website, or whatever you want.
  4. @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,
  5. @MoOx @dotJS 2016 The current solutions are very limited.

  6. @MoOx @dotJS 2016 your favourite stack. Let’s say you could

    use
  7. @MoOx @dotJS 2016 The one that is easy to reason

    about. The one you love.
  8. @MoOx @dotJS 2016 The one that allows you to improve

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

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

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

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

    on the client, so your `onClick` events are ignored …
  13. @MoOx @dotJS 2016 With a bit of courage, you might

    hack your way into it,
  14. @MoOx @dotJS 2016 still you won’t have a proper asset

    graph
  15. @MoOx @dotJS 2016 I tried to hack my way into

    it I ended up creating a athoner kind of generator.
  16. @MoOx @dotJS 2016 https://phenomic.io

  17. @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.
  18. @MoOx @dotJS 2016 Your content can be written in Markdown,

    LaTex, HTML, JSON… Basically any format
  19. @MoOx @dotJS 2016 Forget the old templating languages.

  20. @MoOx @dotJS 2016 You build your website with React components

  21. @MoOx @dotJS 2016 You might ask, what does Phenomic adds

    to the equation ?
  22. @MoOx @dotJS 2016 hot reloading first off

  23. @MoOx @dotJS 2016

  24. @MoOx @dotJS 2016 top-notch UX next,

  25. @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.
  26. @MoOx @dotJS 2016 The big difference when JS is on

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

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

    page transitions, without the hacky "pjax" solution.
  29. @MoOx @dotJS 2016 Out of the box

  30. @MoOx @dotJS 2016 If you deliver your website over HTTPs,

    you have a progressive web app. Service Worker included
  31. @MoOx @dotJS 2016 You can generate an RSS feed or

    a sitemap with just a plugin.
  32. @MoOx @dotJS 2016 We’re currently working on making Phenomic able

    to consume anything with a minimal API
  33. @MoOx @dotJS 2016 You will be able to generate a

    static version of a Wordpress website.
  34. @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
  35. @MoOx @dotJS 2016 Phenomic is a static website generator that

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

    developers, we’d be really happy to receive your input and contributions.
  37. @MoOx @dotJS 2016 Thank you. https://phenomic.io @MoOx