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?
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