How to use React, webpack and other buzzwords if there is no need {#cover}

Varya Stepanova, Intergalactico - Nordcloud Design Studio

How to use React, webpack and other buzzwords if there is no need

Varya Stepanova

How to use

,

and other buzzwords if there is no need

Me

Now

Design Systems Specialist
at Intergalactico _{Nordcloud Design Studio}

Before

TMG (Amsterdam, the Netherlands); Yandex (Moscow, Russia)

Area of expertise

Components on the web: design systems, pattern libraries, SGDD, BEM. Techs: CSS, JavaScript, etc.

How to study new?

Maybe a useful app?

Blog

Overengineering
Open source
Hosted on GitHub
Source in Markdown
Generated HTML

March 2013:

borschik bem-tools bem-core CSSO

May 2014: DOCPAD

styleguide visual regression tests

January 2017:

A lot of plugins
“Server” React + “client” React

File structure

content/
  posts/
    my-awesome-post/
      index_en.md
      index_ru.md

http://varya.me/en/posts/my-awesome-post/
http://varya.me/ru/posts/my-awesome-post/

Development flow

npm run dev

Runs development server
Builds JavaScript and CSS bundles
Generates HTML

npm run build

The Frontend

React components for SSR
React components for browser
CSS modules for both

Pros & cons

Happy

Overengineering :-) Fancy new technologies
Fast building process
Not large codebase, open for experiments
Ready for framework-of-the-week

Sad

Overengineering :-( Writing a blog and not writing for the blog
Solution specific limits

Thank you

Varya Stepanova, Intergalactico - Nordcloud Design Studio
@varya_en; on the web: varya.me

Slides

varya.me/react-finland-2018

Fork me on Github