$30 off During Our Annual Pro Sale. View Details »

A static website with React? Really?

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

Maxime Thirouin

May 25, 2016
Tweet

More Decks by Maxime Thirouin

Other Decks in Technology

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