I open sourced 3 modules from Airbnb
Tags: javascript, react, beginners, npm
Published: 2017-08-27 07:26:38

---
title: I open sourced 3 modules fromÂ Airbnb
published: true
description: ...and here is how it helped me
tags: javascript, react, beginner, npm
cover_image: https://thepracticaldev.s3.amazonaws.com/i/cngltphoemmmeyzgguwl.png
---

###Background

As I was reading [Adam Neary](https://medium.com/@AdamRNeary)â€™s story of [Rearchitecting Airbnbâ€™s Frontend](https://medium.com/airbnb-engineering/rearchitecting-airbnbs-frontend-5e213efc24d2), I came across two React components, which have really aroused my interest as a rookie frontend developer.

To name them, they are called [`<HideAt/>`](https://github.com/kristof0425/react-hide-at) and [`<ShowAt/>`](https://github.com/kristof0425/react-show-at). I had several reasons, why I got interested in them so much:

- I wanted to create my very first NPM module, but I didnâ€™t want to make it, just for having one. Iâ€™ve always wanted to give value to the community by creating it.
- [`<HideAt/>`](https://github.com/kristof0425/react-hide-at) and [`<ShowAt/>`](https://github.com/kristof0425/react-show-at), they solve a problem and I even think there are more potential in them.
- They seemed easy to replicate, although at first sight, I didnâ€™t have a clue how I should start implementing them.

From the words of [Adam](https://medium.com/@AdamRNeary), [`<HideAt/>`](https://github.com/kristof0425/react-hide-at) and [`<ShowAt/>`](https://github.com/kristof0425/react-show-at) are:

>They are responsive utilities, which allow us to dramatically alter what the user experiences at different screen sizes without having to hide and show using CSS. This leads to much leaner pages.

###Implementation

As a starting point I went to [airbnb.com](https://airbnb.com), opened up the React Dev Tools and searched for either [`<HideAt/>`](https://github.com/kristof0425/react-hide-at) or [`<ShowAt/>`](https://github.com/kristof0425/react-show-at), I canâ€™t remember now. ðŸ™ƒÂ 
Soon I realised, I have to implement 3 modules and not 2, since they were wrapped into a HOC called, [`withBreakpoints`](https://github.com/kristof0425/react-with-breakpoints).Â 
( **Fun fact**: When I first encountered them, I didnâ€™t even know exactly what a HOC is.)
After this, I tried to copy the behaviour  of the 3 modules from Airbnbâ€™s website with the best of my knowledge and with the help of Google.

These 3 modules, taught me a few things:

- Reading the docs is always the **shortest** path
- Before youâ€™re about to create a new npm module, itâ€™s useful to look for competition on the market, **donâ€™t reinvent the wheel**
- It pays off **reading your competitor modulesâ€™ source code** (if there is one of course)
- Donâ€™t hesitate so much on the How?, just start doing it and eventually youâ€™ll get there
- **Use npms.io** and take a look at how they are ranking your module, it can really **provide you** with some **helpful insights**

From the technical aspect:

- What `HOC`s are and why they are useful
- Configuring `babel` and `eslint`
- Getting familiar with test writing with `jest` and `Node`â€˜s `assert`
- Using coverage and Travis CI

In the end, I was ready with all the 3 components featurewise. I was able to publish them, but I still didnâ€™t have any unit tests written for them, nor a continuous integration service set up for the repos.

As I use quite a few npm modules from day to day, I tend to prefer those, which have tests written and own ðŸ’¯ coverage percentages or rather `90% <`. 
So all in all, I had work to do, the hard work to doâ€¦ at least I thought so.

**Travis**:
The ease of setting up Travis CI (*the integration service I chose to use*) was a **pleasant surprise** for me. I just had to create a `.travis.yml` with the following snippet:

```
# .travis.yml
language: node_js
node_js:
  - 6
  - 7
notifications:
  email:
    on_success: never
```

> **TIP**: The `notifications` property is optional, but with declaring it, you can [configure your notifications](https://docs.travis-ci.com/user/notifications/) from Travis. In the above code snippet you can see that I prefer getting emails only about my failing builds.

**Unit tests**:

Read the docs, read the docs and read the docs. ðŸ˜ƒ

No, but seriously, I havenâ€™t written any unit test before, I didnâ€™t even know the concrete difference between `jest` and `enzyme`. So you can imagine how I started this challenge. ðŸ˜±

And after I read the docs carefully, suddenly I realised that this was a pleasant surprise as well. You can pick up unit test writing really quicklyâ€Šâ€”â€Šof course Iâ€™m talking here about some basic things like, â€œcomponent is able to receive and change its `props`â€, but my message just tries to suggest that **test writing is totally not hard to learn**. ðŸ˜Š

To sum it up, these two were the ones, which seemed to me the biggest painful points in the implementation. I just wanted to tell you, that how wrong I was.

###More potential
In my opinion [`<HideAt/>`](https://github.com/kristof0425/react-hide-at) and [`<ShowAt/>`](https://github.com/kristof0425/react-show-at) has more potential then just being responsive utilities. Combined with [`withBreakpoints`](https://github.com/kristof0425/react-with-breakpoints) and [James Kyle](https://medium.com/@thejameskyle)â€™s [`react-loadable`](https://github.com/thejameskyle/react-loadable) they could provide truly leaner webpages, by importing only the bundles the client-side needs.
For example, when you open a page on mobile, the tablet view bundle and the PC one could be left out, since they are unnecessary/redundant in that context. Those bundles could be imported in asynchronously, only when `resize` happens.

###Final words
If you got interested about these components, you can reach them via the links and if you were there, feel free to open issues or fork them. ðŸ™‚

Last but not least, Iâ€™d like to thank [Tamas Fodor](https://twitter.com/ruffle1986) for mentoring me on these projects, [Jakub Juszczak](https://medium.com/@apertureless) for your medium post about how to publish npm modules, and [Adam Neary](https://medium.com/@AdamRNeary) for creating **that** medium post and sharing these components, now they are shared with the whole React community. ðŸ˜‰

Please hit that little â¤ï¸ icon, if you liked my little story of my first 3 npm modules, and thank you for reading this!