A static website with React? Really?

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

VIDEO AVAILABLE HERE https://vimeo.com/168480208

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. @MoOx
   6
   But…
   

   View Slide

7. @MoOx
   7
   Security
   Problem 1
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. @MoOx
    11
    Reliability
    Problem 2
    

    View Slide

12. @MoOx
    12
    “Database connection error.”
    

    View Slide

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

    View Slide

14. @MoOx
    14
    TOO MANY
    

    View Slide

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

    View Slide

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

    View Slide

17. @MoOx
    17
    Performance
    Problem 3
    

    View Slide

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

    View Slide

19. @MoOx
    19
    Workarounds?
    

    View Slide

20. @MoOx
    20
    

    View Slide

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

    View Slide

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

    View Slide

23. @MoOx
    23
    “There has to be another way”
    

    View Slide

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

    View Slide

25. @MoOx
    25
    Tooling is good.
    

    View Slide

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

    View Slide

27. @MoOx
    27
    KISS
    Keep It Simple and Stupid
    

    View Slide

28. @MoOx
    28
    Static websites, really?
    

    View Slide

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

    View Slide

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

    View Slide

31. @MoOx
    31
    Why static?
    Secure
    Simple
    Fast
    Cheap
    

    View Slide

32. @MoOx
    32
    

    View Slide

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

    View Slide

34. @MoOx
    34
    Those websites are
    highly dynamic.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. @MoOx
    40
    http://jamstack.org/
    

    View Slide

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

    View Slide

42. @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 defined APIs from our front-end.
    

    View Slide

43. @MoOx
    43
    It’s not a trend.
    

    View Slide

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

    View Slide

45. @MoOx
    45
    CDN is not a luxury anymore.
    

    View Slide

46. @MoOx
    46
    CI and CD is easy
    

    View Slide

47. @MoOx
    47
    Web is constantly evolving.
    

    View Slide

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

    View Slide

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

    View Slide

50. @MoOx
    50
    # Markdown
    

    View Slide

51. @MoOx
    51
    (WYSIWYG is not what you get)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. @MoOx
    55
    # Layout & templating
    

    View Slide

56. @MoOx
    56
    ⛔
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. @MoOx
    61
    Testing JavaScript apps can be easy
    
    

    View Slide

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

    View Slide

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

    View Slide

64. @MoOx
    64
    More than
    400 static website generators
    are available
    

    View Slide

65. @MoOx
    65
    KISS
    Keep It Simple and Stupid
    

    View Slide

66. @MoOx
    66
    

    View Slide

67. @MoOx
    67
    JAVASCRIPT
    

    View Slide

68. @MoOx
    68
    

    View Slide

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

    View Slide

70. @MoOx
    70
    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?
    

    View Slide

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

    View Slide

72. @MoOx
    72
    REACT
    

    View Slide

73. @MoOx
    73
    

    View Slide

74. @MoOx
    74
    https://phenomic.io
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

81. @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 files).
    Awesome DX
    

    View Slide

82. @MoOx
    82
    Highly capable by default
    Offline mode (Servicer Worker and/or Appcache)
    Blog capabilities
    RSS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

87. @MoOx
    Questions ?
    87
    I don’t bite.
    

    View Slide