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
Tweet

More Decks by Maxime Thirouin

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. @MoOx
    @dotJS 2016
    It can be a blog, a documentation website,
    or whatever you want.

    View Slide

  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,

    View Slide

  5. @MoOx
    @dotJS 2016
    The current solutions are very limited.

    View Slide

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

    View Slide

  7. @MoOx
    @dotJS 2016
    The one that is easy to reason about.
    The one you love.

    View Slide

  8. @MoOx
    @dotJS 2016
    The one that allows you to
    improve the quality of your code
    with unit testing and type checking.

    View Slide

  9. @MoOx
    @dotJS 2016
    The one that can be
    used universally,
    in node, in a browser, even on a native app.

    View Slide

  10. @MoOx
    @dotJS 2016
    React, webpack, Flow, CSS modules,
    and literally anything from npm
    Let’s say you can build your website with

    View Slide

  11. @MoOx
    @dotJS 2016
    Some solutions, like metalsmith
    can offer a fraction of that,
    but they just render a dumb string.

    View Slide

  12. @MoOx
    @dotJS 2016
    In these cases, React doesn’t
    kick in on the client, so your
    `onClick` events are ignored …

    View Slide

  13. @MoOx
    @dotJS 2016
    With a bit of courage, you might hack your way into it,

    View Slide

  14. @MoOx
    @dotJS 2016
    still you won’t have
    a proper asset graph

    View Slide

  15. @MoOx
    @dotJS 2016
    I tried to hack my way into it
    I ended up creating a athoner kind of generator.

    View Slide

  16. @MoOx
    @dotJS 2016
    https://phenomic.io

    View Slide

  17. @MoOx
    @dotJS 2016
    phenomic = (content) =>
    webpack(
    { content }
    )
    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.

    View Slide

  18. @MoOx
    @dotJS 2016
    Your content can be written in
    Markdown, LaTex, HTML, JSON…
    Basically any format

    View Slide

  19. @MoOx
    @dotJS 2016
    Forget the old templating languages.

    View Slide

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

    View Slide

  21. @MoOx
    @dotJS 2016
    You might ask, what does
    Phenomic adds to the equation ?

    View Slide

  22. @MoOx
    @dotJS 2016
    hot reloading
    first off

    View Slide

  23. @MoOx
    @dotJS 2016

    View Slide

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

    View Slide

  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.

    View Slide

  26. @MoOx
    @dotJS 2016
    The big difference when JS is on is that
    when the user navigates,
    it just loads the minimal data-requirements.

    View Slide

  27. @MoOx
    @dotJS 2016
    a small chunk of JS
    containing its data.
    In fact, for each page, Phenomic also creates

    View Slide

  28. @MoOx
    @dotJS 2016
    With this, you can finally offer
    real-smooth page transitions,
    without the hacky "pjax" solution.

    View Slide

  29. @MoOx
    @dotJS 2016
    Out of the box

    View Slide

  30. @MoOx
    @dotJS 2016
    If you deliver your website
    over HTTPs, you have a
    progressive web app.
    Service Worker included

    View Slide

  31. @MoOx
    @dotJS 2016
    You can generate
    an RSS feed or a sitemap
    with just a plugin.

    View Slide

  32. @MoOx
    @dotJS 2016
    We’re currently working on making
    Phenomic able to consume anything
    with a minimal API

    View Slide

  33. @MoOx
    @dotJS 2016
    You will be able to
    generate a static version
    of a Wordpress website.

    View Slide

  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

    View Slide

  35. @MoOx
    @dotJS 2016
    Phenomic is a static website
    generator that wants developers
    and writers to be happy.

    View Slide

  36. @MoOx
    @dotJS 2016
    As it’s a project by and for developers,
    we’d be really happy to receive your
    input and contributions.

    View Slide

  37. @MoOx
    @dotJS 2016
    Thank you.
    https://phenomic.io
    @MoOx

    View Slide