Photo by Christina @ wocintechchat.com on Unsplash

This post explores three levels of API mocking and how we can make mocking work the same way for both storybook and unit test. I will also share my learning in debugging why mocking XMLHttpRequest doesn't work. If you want to go ahead and see the best solution, check Option Three: msw.

Why

  • the backend is not ready;
  • speed up UI development cadence

Typically we would mock API response for development in storybook and unit test. Solutions exists for storybook ( example) and unit test ( example)…


Photo by Edward Howell on Unsplash

Yes, I firmly believe that microfrontend is a game-changer in Web development. Microfrontend enables the independence of development and deployment of Web apps while maintaining a fast, cohesive user experience.

Problem with today’s architecture

Accordingly, Teams are organized to manage the two apps separately.

The reason for this architecture is to reduce dependency. By dividing the large site into two sub-apps, teams can manage their own development and deployment…


Closeup of a pair of hands sketching UI components on a sheet of paper
Closeup of a pair of hands sketching UI components on a sheet of paper

Although React and other Web frameworks make it easier to share components, sharing doesn’t happen by default. Challenges still exist, especially at an enterprise level, which demands extra efforts to coordinate among teams working on various products across organizations. In reality, even discovering components created by other teams is hard.

We would like to share how we reuse components at PayPal. While we are not readily sharing our solution codebase, we are eager to share our thoughts behind it. In particular, we try to address these problems:

  • Enable discovery of components: Where can I find components?
  • Ease sharing of components…


Problem

A great advantage of GraphQL is you can colocate GraphQL query with React components. For example,

Here in the component we get data from GraphQL query (using Apollo query hook), and are immediately able to render it. It is sweet because it is clear what data the component requires from server and how the component renders the data. Colocating the logics makes it much easier to understand and debug the code.

Data fetching takes time, and we usually want to show users some loading indicator before we can render the data. That’s why the query hook also returns a…


Photo by Duy Pham on Unsplash

When I first heard JAMstack, or “static app” over a year ago, I was confused. What does it mean to be “static”? Does it take “dynamic” server data and “dynamic” user input? I made my biggest courage and threw our these questions in our internal slack channel. Our then architect Jamund Ferguson kindly helped clarify:


Photo by Randy Fath on Unsplash

CSS is not fun to me personally. But the css-in-js solution provided by tools like emotion and styled-components makes it a lot more fun as I feel I am developing a react component with all props available beyond simply css.

I like both emotion and styled-component. Albeit that they implement in different mechanisms under the hood and thus their size and performance differ, the exposed API and developer experience is very similar. They would be my "go-to" solution for styling a component.

…until I came across Theme UI recently.

Is this yet another css-in-js solution?

Not really. Theme UI is…


Most people today use modern browsers, yet we still have a small but important percentage of traffic from legacy browsers like Internet Explorer.

There are two things modern browsers can do but legacy browsers cannot. First, modern browsers support many new syntax offered in ES2015+, such as ES module import, arrow function, object destructuring, etc. For legacy browsers, these new syntax must be transpiled to compatible forms, usually with Babel.

Second, modern browsers support many newer ES2015+ functions, such as Promise, fetch, Array.proptype.includes. For these functions to work in legacy browsers, the corresponding polyfills must be provided.

To ensure our…


Photo by JOSHUA COLEMAN on Unsplash

If you find this post useful, don’t forget to give me your 👏 (s) and follow me on twitter https://twitter.com/imDongCHEN

Problem

Background


“man riding on UTV on desert during daytime” by Roberto Nickson (@g) on Unsplash

These four tips are lessons I learned recently. Just want to share in case you find it useful.

Tip One: Use conditional rendering as first choice

Or use class name /css to toggle hiding of the component

Usually we should use conditional rendering. It is faster because no component is generated and thus React does not need to do rendering / reconcilation / DOM operation. In contrast, in the css approach, React still needs to create the DOM and do all the updating even though it’s never shown.

Another benefit of…


“selective focus photography of pile of decorative stones” by Jeppe Hove Jensen on Unsplash

This post discusses a usage pattern of middleware in Node.js, and my thoughts on its pros and cons. I’ll start with a brief introduction to the concept of middleware. If you are familiar with middleware, you can jump to [Con of middleware]

What is middleware

Dong Chen

Web engineer @robinhood; PhD in Human-Computer Interaction

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