@MoOx
@dotJS 2016
https://phenomic.io
A static website with React?
Really?
Slide 2
Slide 2 text
@MoOx
@dotJS 2016
build a website.
Let's say you have to
Slide 3
Slide 3 text
@MoOx
@dotJS 2016
It can be a blog, a documentation website,
or whatever you want.
Slide 4
Slide 4 text
@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,
Slide 5
Slide 5 text
@MoOx
@dotJS 2016
The current solutions are very limited.
Slide 6
Slide 6 text
@MoOx
@dotJS 2016
your favourite stack.
Let’s say you could use
Slide 7
Slide 7 text
@MoOx
@dotJS 2016
The one that is easy to reason about.
The one you love.
Slide 8
Slide 8 text
@MoOx
@dotJS 2016
The one that allows you to
improve the quality of your code
with unit testing and type checking.
Slide 9
Slide 9 text
@MoOx
@dotJS 2016
The one that can be
used universally,
in node, in a browser, even on a native app.
Slide 10
Slide 10 text
@MoOx
@dotJS 2016
React, webpack, Flow, CSS modules,
and literally anything from npm
Let’s say you can build your website with
Slide 11
Slide 11 text
@MoOx
@dotJS 2016
Some solutions, like metalsmith
can offer a fraction of that,
but they just render a dumb string.
Slide 12
Slide 12 text
@MoOx
@dotJS 2016
In these cases, React doesn’t
kick in on the client, so your
`onClick` events are ignored …
Slide 13
Slide 13 text
@MoOx
@dotJS 2016
With a bit of courage, you might hack your way into it,
Slide 14
Slide 14 text
@MoOx
@dotJS 2016
still you won’t have
a proper asset graph
Slide 15
Slide 15 text
@MoOx
@dotJS 2016
I tried to hack my way into it
I ended up creating a athoner kind of generator.
Slide 16
Slide 16 text
@MoOx
@dotJS 2016
https://phenomic.io
Slide 17
Slide 17 text
@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.
Slide 18
Slide 18 text
@MoOx
@dotJS 2016
Your content can be written in
Markdown, LaTex, HTML, JSON…
Basically any format
Slide 19
Slide 19 text
@MoOx
@dotJS 2016
Forget the old templating languages.
Slide 20
Slide 20 text
@MoOx
@dotJS 2016
You build
your website with React
components
Slide 21
Slide 21 text
@MoOx
@dotJS 2016
You might ask, what does
Phenomic adds to the equation ?
Slide 22
Slide 22 text
@MoOx
@dotJS 2016
hot reloading
first off
Slide 23
Slide 23 text
@MoOx
@dotJS 2016
Slide 24
Slide 24 text
@MoOx
@dotJS 2016
top-notch UX
next,
Slide 25
Slide 25 text
@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.
Slide 26
Slide 26 text
@MoOx
@dotJS 2016
The big difference when JS is on is that
when the user navigates,
it just loads the minimal data-requirements.
Slide 27
Slide 27 text
@MoOx
@dotJS 2016
a small chunk of JS
containing its data.
In fact, for each page, Phenomic also creates
Slide 28
Slide 28 text
@MoOx
@dotJS 2016
With this, you can finally offer
real-smooth page transitions,
without the hacky "pjax" solution.
Slide 29
Slide 29 text
@MoOx
@dotJS 2016
Out of the box
Slide 30
Slide 30 text
@MoOx
@dotJS 2016
If you deliver your website
over HTTPs, you have a
progressive web app.
Service Worker included
Slide 31
Slide 31 text
@MoOx
@dotJS 2016
You can generate
an RSS feed or a sitemap
with just a plugin.
Slide 32
Slide 32 text
@MoOx
@dotJS 2016
We’re currently working on making
Phenomic able to consume anything
with a minimal API
Slide 33
Slide 33 text
@MoOx
@dotJS 2016
You will be able to
generate a static version
of a Wordpress website.
Slide 34
Slide 34 text
@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
Slide 35
Slide 35 text
@MoOx
@dotJS 2016
Phenomic is a static website
generator that wants developers
and writers to be happy.
Slide 36
Slide 36 text
@MoOx
@dotJS 2016
As it’s a project by and for developers,
we’d be really happy to receive your
input and contributions.