A blog by developers Maarten Anckaert, Sam Van Hoof, Jasper Vercammen, Brent van Geertruy and Robin Houdmeyers
A couple of weeks ago, we attended ReactEurope 2017 – the largest React conference, which gathered 800+ front-end developers in Paris for two days filled with talks by React experts and enthusiasts. Topics covered the entire React ecosystem: React.js, React Native, GraphQL, Redux, Relay, Universal apps, inline CSS and more. Our key takeaways from this
Jest Is the next best thing when it comes to testing your apps
Christoph Pojer tried to convince us that testing (on the frontend) should be painless. He did this by giving us an introduction to Jest, a test framework developed by Facebook. Three main focal points form the basis for Jest:performance, features and adoptability.
- Performance: Jest only gives you 1% improved performance, which may not seem much. But if you are writing tests day after day, week after week, then in the end you will have won a lot. Jest also runs its tests in parallel and tracks the speed of every test, using the results to optimise which worker should run which test on the next run.
- Features: One of Jest’s philosophies is to provide an integrated ‘zero-configuration’ experience. It is the base feature of the framework. Other features that separate Jest from other testing frameworks: color highlighting in output messages, telling the user what the test expected and what the real outcome was. It has a clean command line interface, which shows the status of all the tests at the bottom and the test that are running in parallel at the top. There’s also a watch mode, in which you can search for specific tests that you want to run, or watch changed files. And last but not least, they offer snapshots. The first time you run a snapshot test, it records the output of your code. The next time you run your test, it matches the same output against the recorded one. If something changed, the test fails and you have the option to either update the snapshot or fix the code that broke the snapshot.
- Adoptability: Jest works out of the box. You just need to install it and you’re good to go. It is available in the largest boilerplate project for React and React Native. There is also a community driven project, codemods, that helps other user with migrating from their old testing frameworks to Jest. It is easy to learn and grows very fast, making it easier to write more and better test.
We were all pretty impressed by this talk, leaving us with the feeling that we should all write more tests and hoping that it finally could be fun and cool to write tests.
Composing and playing with HOC functions/components
One of the most inspiring talks of the conference was given by Nik Graf: he explained the concept of composition and how to use it in React applications. Composition is defined as: “A mechanism to combine simple functions to build more complicated ones”.
Since an example says more than a thousand words:
Instead of wrapping functions within functions within functions, you use compose to write a much cleaner piece of code that does the exact same thing in a much simpler way.
What you can do with functions, you can also do with components in React. You can also write yourself a higher order component. The example given by Graf was that of an application that had many components, all of which had a loading indicator, as long as the property loading was true. Since it returned in every component, this is also something that can be extracted:
This is a higher order component that you can use as follows:
This is a lot easier to read and makes it very easy to implement generic pieces of code into a component.
If you want to learn more, we can advise you to watch the talk by Graf for yourself. .
Animations are cool right? But they’re also kinda two-thousand and late, don’t you think? In his talk ‘A Novel Approach to Declarative Animations in React Native’, Joel Arvidsson tried to convince us that animations are still cool and far easier to implement than one would think.
I think every developer ever has been on the point where they’d like to introduce some cool animations to their application but didn’t because typically it’s tedious and just causes a whole lot of overhead. Well, those days are over. Finally we’re done telling the concept and design team to ease up on animations because they take too long to implement and aren’t worth it. Finally we can have some fun animating our UI without worrying about unclean code or maintainability.
The simple and declarative coding style combined with the winning attitude of Joel and a cool example is what won us over. After seeing his talk, we’re certain that animations will have a positive impact in the way we build our UI. But hey, don’t take our word for it, check out Joel’s talk and try it out for yourself!
Yarn takes it all
In case you’re thinking, “Hey, did I miss a talk about Yarn at React-Europe?” – no you didn’t. But in every other talk in which some kind of node modules installation was in place, Yarn took to the stage. This is not surprising, since Yarn brings the best of many package managers in one solution. It takes inspiration from Ruby’s Bundler and Rust’s Cargo, which are not accidentally having Yehuda Katz on the team.
What makes Yarn so great? Here are three main advantages we would like to point out.
- Lockfile: Every yarn install also creates a yarn.lock file which ensures that every other yarn install on any other system will result in the same package versions. This reduces minor differences in packages and thus also reduces hard to trace down bugs.
Important notice: be sure to check the yarn.lock file into version control. This way, every other team member or build task installs the exact same module versions as the ones you just defined.
- Cache: Yarn is able to install even without an internet connection. Yes indeed, no need for a full node modules download every time you hit npm install – Yarn saves you some precious time. Also no need to worry you will have a wrong or old version: Yarn will create a fingerprint for every installed node module, so it can easily compare it against the yarn.lock file.
- Fully npm compatible: Choosing Yarn is a no brainer, no need to learn something new or go through a difficult wizard, Yarn is fully compatible with existing node modules and even with the npm registry.
Oh yes, Yarn also comes with a great CLI tool and a bunch of emojis inside .
Lite is the new sexy
In another interesting talk, Nicolas Gallagher explained why Twitter felt the need to create a lite version of their well-known application. They’ve experienced a hard lesson when trying to become an online platform available in every country. The fact that 45% of mobile connections are still using 2G networks was the main barrier they’ve encountered. This meant that they were unavailable for millions of people, or could not provide the level of user experience Twitter strives for.
This is why the company decided to create their ‘lite’ version of the web application. Twitter Lite provides a new mobile web experience, capable of loading every bit of data even on a 2G network. It will also take up less than 1MB on your mobile device, allowing the application to properly load all components and data without loading spinners after every navigation click.
Gallagher pointed out that they were able to achieve this by looking at the disposability of parts in the current application. They created smaller, lightweight components just for mobile usage with a focus on using the least amount of data.
And if you wish to go into ‘supersave-mode’, they’ve built in the option to enable a special data saver mode which allows the device to reduce the amount of data being used even further . This can be very interesting for areas where mobile data remains an expensive luxury.
Twitter has already received some awesome feedback from users who weren’t able to use Twitter before. As for our key takeaway, the company made us realize that there are a lot of people who aren’t able even just to opensome of the web applications we write today at iCapps. For companies located in Belgium, we will almost never get to experience these caveats up front. But for international companies, lite versions can provide a perfect solution if they really wish to become available on every continent in the world.
Facebook presentations were awesome
This year a lot of React devs came to showcase their work. Without a doubt these were some of the most interesting presentations at ReactEurope.
What stood out the most about the Facebook talks, however, were the clean and well structured presentations and the skilled presenters.
One of the most interesting ones was the talk by Eric Vicenti about ‘Maximally Modular Apps with React Navigation’. He has the most insanely credible ideas about achieving maximum code reusability in React Native applications. If you are interested in building a React Native application, look him up! One of the main topics he touches on is just optimizing the use of reducers and single-directional data flow. Reusability can be increased with something just as simple as that.
Another topic was the use of React Navigation in React Native, which sounded pretty promising, because we all know that the current means of navigation in React Native can be kind of wonky.
Another very interesting talk was by Mehdi Mulani about ‘Integrating React Native with Native Infrastructure’. Medhi talks about gradually integrating React Native into native applications and gives a nice overview of all the problems that will arise when attempting this. This in my opinion is a great use case for React Native!
As you could probably derive from this post, React Native was heavily represented at ReactEurope and got an unexpected amount of attention. This gives us high hopes for the future of this still very young framework.