Stéphane Bégaudeau graduated from the Nantes University of Sciences and Technology and is currently working as an Eclipse Modeling consultant at Obeo in France.

First React component

After a first part where we have seen how to get move from vanilla JavaScript to React, let’s see how we can create real React components. In order to introduce some dynamicity in our React code, we would like to execute functions to compute some JSX instead of relying only on static JSX code. We are lucky since React.createElement can take not only the name of a standard element (like div or h1 )...

From Vanilla JavaScript to React

React is a JavaScript framework used to build user interfaces. It can be used to create JavaScript applications by manipulating dynamically the content of the page. The browser already provides an API to create elements in the page, the DOM, so newcomers may wonder what does React bring to the table and how it relates to the DOM. Vanilla JavaScript and the DOM In JavaScript, just like in most prog...

Getting started with GraphQL

REST has served us well for more than a decade as the de facto architectural style for our HTTP APIs but it is starting to show its age. It may still be relevant if you are not only the provider but also the (sole?) consumer of your API. In such situation, you can use pretty much anything you want since you know what you have on the back-end and what you want for the front-end. REST can be nice fo...

React Europe 2018

Last week, I was lucky enough to attend React Europe 2018 in Paris, France. Since we are using React at Obeo to build some of our applications, it was the perfect opportunity to learn more from the community and now that this edition of React Europe is in the rear-view mirror, it’s time to look back on some of its key moments. Day One React Europe 2018 kicked off with a keynote from Ken Wheeler on...

Chrome Devtools - Part 5

In this post, we will see how to detect issues with the user experience of your web application with the Performance and Memory tabs in the Chrome Devtools. Chrome contains a complete web application profiler in its Performance and Memory tabs. With the Performance tab, it is possible to record everything happening in your web application. You have the ability to start a new recording with ⌘ + e (...

Chrome Devtools - Part 4

After our tour of the Chrome Devtools Console, we can now have a look at the Network tab. This tab will display all communication between the current page and any server. The Network tab is composed of two parts, on top you will find an overview of the timeline where all the requests that have been made can be seen. Below this overview, the Network tab shows the details of each request. Finally ab...

Chrome Devtools - Part 3

After having a look at the debugging of the DOM first and then all the secrets of the Console in the second part, in the third part of this analysis of the Chrome Devtools, we will detail the tooling provided by Chrome to view, edit and debug our code thanks to the Sources tab. The Sources tab is divided into four different areas, on the left, the navigator is available with various drawers like S...