A static website with React? Really?

@MoOx A static website with React? 1 Really? @MoOx

@MoOx @MoOx Front-End/UI Developer Freelance https://moox.io/ 2

@MoOx 3 Putain de code ! github.com/MoOx

@MoOx 4 Let’s say you need a website. Personal website,
documentation, corporate website etc

@MoOx 5 Wordpress and Drupal are the most used CMS.
“WordPress powers 25% of the internet”

@MoOx 6 But…

@MoOx 7 Security Problem 1

@MoOx 8 #PanamaPapers http://www.theregister.co.uk/2016/04/07/ panama_papers_unpatched_wordpress_drupal/

@MoOx 9 http://codex.wordpress.org/ FAQ_My_site_was_hacked

@MoOx 10 You need to keep your website up to
date

@MoOx 11 Reliability Problem 2

@MoOx 12 “Database connection error.”

@MoOx 13 How many plugins and commercial solutions exist just
to scale a Wordpress website?

@MoOx 14 TOO MANY

@MoOx 15 Client Server → ← 90’s model Browsers are
document readers. Every interaction happen on the server.

@MoOx 16 https://speakerdeck.com/biilmann/the-jam-stack

@MoOx 17 Performance Problem 3

@MoOx 18 Facebook instant article Google AMP … Performance sucks
This things are a threat to the open web

@MoOx 19 Workarounds?

@MoOx 20

@MoOx 21 https://vip.wordpress.com/our-services/

@MoOx 22 Building secure, reliable and fast websites is hard
and expensive

@MoOx 23 “There has to be another way”

@MoOx 24 “Build and serve” instead of “Build on serve”

@MoOx 25 Tooling is good.

@MoOx 26 https://speakerdeck.com/biilmann/the-jam-stack

@MoOx 27 KISS Keep It Simple and Stupid

@MoOx 28 Static websites, really?

@MoOx 29 1. Content 2. Templates 3. Build step 4.
Deploy step Developer / Publisher

@MoOx 30 User Experience 1. Request 2. Builded content from
CDN 3. (Enhancement from external APIs)

@MoOx 31 Why static? Secure Simple Fast Cheap

@MoOx 32

@MoOx 33 Many examples are not static websites. http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/

@MoOx 34 Those websites are highly dynamic.

@MoOx 35 These days, websites and SPA are not that
different.

@MoOx 36 Lot’s of websites are hybrid. Enhanced with JavaScript.
Usage of APIs for some parts Usage of third party services.

@MoOx 37 SPA are not SPA anymore. Respond to URLs,
good browser history, pre-rendering… And,

@MoOx 38 It’s just (web) apps.

@MoOx 39 The JAM stack is the modern way for
building websites and apps.

@MoOx 40 http://jamstack.org/

@MoOx 41 JAM stands for JavaScript, APIs and Markup.

@MoOx 42 • No more expensive dynamic servers • Focused
on front-end hosted on a CDN • Use APIs for any moving parts. It's the fastest growing new stack for building websites and apps The JAM stack is the stack for this new reality. Instead of FTPing server-side code to a shared server, we push to git and our code is instantly built and distributed onto CDN nodes across the world. Instead of depending on a database for every request we serve, we use build tools to ship full sites and apps ready to run directly in the browser. Instead of mixing persistence, HTML generation, credit-card transactions, authentication, etc, all together, we separate these concerns and consume well deﬁned APIs from our front-end.

@MoOx 43 It’s not a trend.

@MoOx 44 Server-less* architectures are growing. (Apex, $ now cli
tool)

@MoOx 45 CDN is not a luxury anymore.

@MoOx 46 CI and CD is easy

@MoOx 47 Web is constantly evolving.

@MoOx 48 Now, it’s 2016 and you are going to
make a website

@MoOx 49 { "name": "JAMStack", "version": "1.0.0", "description": "The website
for jamstack.org", "main": "gulpfile.js", "scripts": { "build": "./node_modules/.bin/gulp build", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "MIT", "dependencies": { "gulp": "^3.9.1", "gulp-front-matter": "^1.3.0", "gulp-layout": "0.0.3", "gulp-markdown": "^1.2.0", "jade": "^1.11.0" } } https://github.com/jamstack/jamstack.org/blob/master/package.json

@MoOx 50 # Markdown

@MoOx 51 (WYSIWYG is not what you get)

@MoOx 52 The Best Interface is No Interface http://www.nointerface.com/

@MoOx 53 Text format that can offer nice **UX** for
_writers_.

@MoOx 54 Markdown is simple to parse and transform remark
(mdast), markdown-it…

@MoOx 55 # Layout & templating

@MoOx 56 ⛔

@MoOx 57 Text is error prone. We are human, we
make mistakes. Handlebars and friends allow us to produce wrong HTML.

@MoOx 58 And even if your HTML is correct, you
need to sync it with your JavaScript that will enhance the UX.

@MoOx 59 You test your code, right? If not you
should.

@MoOx 60 Testing “HTML apps” that rely on JavaScript is
painful and slow.

@MoOx 61 Testing JavaScript apps can be easy

@MoOx 62 Template > 1 language Text > 1 language
Data > 1 language Back-end > 1 language + 1 package manager Front-end > 1 language + 1 package manager Most static website generator stack

@MoOx 63 Template > 1 language Text > 1 language
Data > 1 language Back-end > 1 language + 1 package manager Front-end > 1 language + 1 package manager Most static website generator stack

@MoOx 64 More than 400 static website generators are available

@MoOx 65 KISS Keep It Simple and Stupid

@MoOx 66

@MoOx 67 JAVASCRIPT

@MoOx 68

@MoOx 69 1. You work with the React ecosystem and
CSS Modules everyday and don’t want to write boring HTML templates and dangerous CSS selectors. 2. You are a modern front-end developer and you don't really want to install Ruby or Python to build silly static HTML pages. 3. 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.

@MoOx 70 What if I told you that you could
reuse all the unit tested React components that you will ﬁnd 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?

@MoOx 71 https://xkcd.com/927/

@MoOx 72 REACT

@MoOx 73

@MoOx 74 https://phenomic.io

@MoOx 75 Goal Simple (like React) Reliable (easily testable) Fast
UX Flexible

@MoOx 76 Programming > JavaScript (node, browser) + npm Text
> 1 language of your choice (default to Markdown) Data > 1 language of your choice (JSON, Yaml…) Simple and Flexible

@MoOx 77 You can just grab some packages on the
npm ecosystem to help you build your website, blog or even a small app. React and npm ecosystem

@MoOx 78 Isomorphic/Universal by default. All pages are available as
HTML (works with no JavaScript) but user can get an enhanced navigation (when JavaScript is on).

@MoOx 79 No reload between pages, enjoy a smooth navigation.
Fast UX

@MoOx 80 Live-edit for content, layouts and any UI elements
thanks to React Hot Loader. Visual errors. Setup and start in few minutes Awesome DX

@MoOx 81 1 command to setup a website or webapp
in a minute. 1 command to write and develop. 1 command to build, optimise and publish (static ﬁles). Awesome DX

@MoOx 82 Highly capable by default Ofﬂine mode (Servicer Worker
and/or Appcache) Blog capabilities RSS

@MoOx 83 Modern syntax (ES2015 and more via Babel, PostCSS
/ cssnext) CSS Modules Strong linting rules for JS (ESLint) and CSS (Stylelint) No global npm package required Good defaults

@MoOx 84 Full control (on almost anything) Any text engine
accepted (default to markdown) Normal Webpack conﬁguration React-Router routes Freedom

@MoOx 85 Current Roadmap [WIP] Pre-render all routes (eg: tags
& categories pages) [WIP] Pagination Built-in Search and easy way to use third party like Algolia Minimalist Admin

@MoOx 86 One more thing… In a very near future,
you will be able to use Phenomic without static content, just to pre-render your routes as App Shell.

@MoOx Questions ? 87 I don’t bite.

A static website with React? Really?

A static website with React? Really?

More Decks by Maxime Thirouin

Other Decks in Technology

Featured

Transcript