Warning! Geek stuff ahead!
Because we at Calibrate always want to be up to date with the latest developments in new technologies, we could not fail to attend the world's largest React and React-native conference in Amsterdam. Two of our Calibrators went out and were inspired by more than 25 speakers. All this in order to create state-of-the-art web applications at all times. The innovations introduced at React 16 were definitely a hot topic at this conference. That's why we went looking for news that we could apply in new, modern applications.
With the introduction of the revamped context API, more flexible refs and better support for fragments, developers are offered better tools and more flexibility to customize web applications. In addition, the server renderer was completely rewritten: it is now no less than three times faster than in React 15. They also decided to give the lifecycle methods a new twist. Older methods are replaced by new ones.
A great deal of new knowledge. We show you the highlights of our visit by discussing some of the lectures that most inspired our Calibrators.
Michele Bertoli, front-end engineer at Facebook, spoke here about the use of state charts: what if the state of your components was deterministic?
A user interface always consists of 2 things: the current status of the UI and the actions that can change this status. Designers will intuitively visualise this in the form of Userflows. In computer terms we speak of a 'finite automata' or 'finite state machines', these determine how the status changes when the user releases a certain action on a state. We determine a finite number of states in advance, which we can then convert into a React structure.
One of the advantages of these state charts is that they make the application logic clear to the entire team. Also for those who are new to the project. This makes collaboration with other profiles such as designers and project managers much easier. Another advantage is that they can easily be integrated with existing state management systems such as Redux or MobX. Furthermore, they can facilitate the creation of automated integration tests.
Augmented Reality (AR) is a live image of reality to which virtual elements are added. Think of apps like Pokémon Go, Instagram and Snapchat. Due to the increasingly powerful mobile devices, it is now possible to make this happen in the palm of your hand.
What's more, Google and Apple are constantly expanding AR capabilities and developing ARCore and ARKit to give developers the tools they need to get started quickly. Because we would like to implement these applications in our React-Native projects, it seemed appropriate to follow Nader Dabit's lecture.
During this lecture Nader gave an introduction to ViroReact. ViroReact is a platform that ensures a smooth integration of ARcore and ARkit in React-Native. The platform consists of 2 main components:
- A high performance native 3D rendering engine and
- Custom React extension for AR and VR development
Adding 3D objects to reality or bringing images to life? It's all possible with just a few lines of React code.
If you install the ViroReact mobile app, you can code live on your computer. You will immediately see the changes on the screen of your phone. We worked on it ourselves and brought the Calibrate logo to life. Place it on a surface (like a table), walk around the table and you can see the logo from all sides.
Why would we only want to use the React architecture to render DOM elements? Ken Wheeler, well-known developer from the USA, proves that it can also be done differently and uses different components to create applications. He brings together audio, 3D rendering and user input. In fact, he uses React to develop more than just a website. Through his approach, he inspires us to create better site animations, games or even UI.
Our Calibrators have already had an instructive and inspiring day. A lot of new information and motivation to get started. We are looking forward to the next edition.
At Calibrate we like to offer our customers the latest developments. Are you interested in a project with Calibrate? Contact us for an informal talk!