A static website with React? Really?

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

@MoOx 6 But…

Slide 7

Slide 7 text

@MoOx 7 Security Problem 1

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@MoOx 11 Reliability Problem 2

Slide 12

Slide 12 text

@MoOx 12 “Database connection error.”

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

@MoOx 14 TOO MANY

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

@MoOx 17 Performance Problem 3

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

@MoOx 19 Workarounds?

Slide 20

Slide 20 text

@MoOx 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

@MoOx 23 “There has to be another way”

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

@MoOx 25 Tooling is good.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

@MoOx 27 KISS Keep It Simple and Stupid

Slide 28

Slide 28 text

@MoOx 28 Static websites, really?

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

@MoOx 31 Why static? Secure Simple Fast Cheap

Slide 32

Slide 32 text

@MoOx 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

@MoOx 34 Those websites are highly dynamic.

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

@MoOx 40 http://jamstack.org/

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

@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.

Slide 43

Slide 43 text

@MoOx 43 It’s not a trend.

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

@MoOx 45 CDN is not a luxury anymore.

Slide 46

Slide 46 text

@MoOx 46 CI and CD is easy

Slide 47

Slide 47 text

@MoOx 47 Web is constantly evolving.

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

@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

Slide 50

Slide 50 text

@MoOx 50 # Markdown

Slide 51

Slide 51 text

@MoOx 51 (WYSIWYG is not what you get)

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

@MoOx 55 # Layout & templating

Slide 56

Slide 56 text

@MoOx 56 ⛔

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

@MoOx 61 Testing JavaScript apps can be easy

Slide 62

Slide 62 text

@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

Slide 63

Slide 63 text

@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

Slide 64

Slide 64 text

@MoOx 64 More than 400 static website generators are available

Slide 65

Slide 65 text

@MoOx 65 KISS Keep It Simple and Stupid

Slide 66

Slide 66 text

@MoOx 66

Slide 67

Slide 67 text

@MoOx 67 JAVASCRIPT

Slide 68

Slide 68 text

@MoOx 68

Slide 69

Slide 69 text

@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.

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

@MoOx 72 REACT

Slide 73

Slide 73 text

@MoOx 73

Slide 74

Slide 74 text

@MoOx 74 https://phenomic.io

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

@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

Slide 77

Slide 77 text

@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

Slide 78

Slide 78 text

@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).

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

@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

Slide 81

Slide 81 text

@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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

@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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

@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

Slide 86

Slide 86 text

@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.

Slide 87

Slide 87 text

@MoOx Questions ? 87 I don’t bite.