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?

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