Pairs web library selection history

Hiroshi Ohsuga
Dec 11, 2020 · 4 min read

This is 11th entry in Eureka Advent Calendar 2020.

Actually we renew our code base of Pairs for web browser since two year ago.
Then we made notes for the result and its reason of library and technology selection.

In this entry I want to review those notes by self and let you know what we like.

Image for post
Image for post

A quoted markdown is the notes, and I put current comment after that.

PRPL

Push

This note is in 2018, and then we didn’t have enough time to study and consider it.
So we considered css sprite based on the premise of using http/1.1, nonetheless, in the result we don’t use css sprite.

Render(SSR)

Actually SSR implementation is complicated but architecture didn’t get complicated in whole.

Precache

Because we already used Workbox at that time, we didn’t consider others.

Lazyload

It can be read to do lazy loading of Reducer. Finally, we don’t do that because the reason why its system was quite complicated and we employed the budget for each bundle size.

We used css-loader at first.
Details are in css library section.

linter/formatter

We are using eslint based on presets and sometimes adjust rules with comment of the reason why we must make it loose or adjust it.

Language

js

Do you need other comments? Typescript won.
It was very very very good news that ts can be parsed by Babel.

css

We should have used css-in-js from the beginning.
Using many webpack loaders makes module updating delay for example in the case of storybook we should wait for updating dependencies to use same webpack config.
To treat as javascript is very useful for many cases.

View library

Lol, it looks heavy bias by lovers of React.
Did Single File Component exists in Vue2 at that time? Pairs Engage, its admin tool and Pairs admin tool use Vue, right?

If we choose now, was decision changed?

¯\_(ヅ)_/¯

I love react.

Miscellaneous

There are many notes for others that I can’t compile in thi entry.

Totally

There are some libraries which was changed many times. Storybook is one of them. Because we stopped using css-loader, finally we can use it stably.
Jest, puppeteer and cypress also are the same. We were trying them to find good cost performance.
Unfortunately we don’t often decide them with clear logic but keep considering and trying libraries to improve maintainability, sustainability and DX.

Eureka Engineering

Learn about Eureka’s engineering efforts, product…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store