Graduates throwing hats silhouettes

UDACITY’S FEND HIGHLIGHTS: KEEPING UP WITH THE TRENDS IN WEB DEVELOPMENT – PART II

This is the second part of two article series which reflects on our experience with Udacity’s Front End Web Development Nanodegree (FEND) program. In the previous article, we have got to show off newly acquired Nanodegree and then we covered one of two main highlights of the program: Progressive Web Apps. In this article, we will discuss React.js – an increasingly popular JavaScript library for building user interfaces and a valuable tool for building Progressive Web Applications. Infographic included!

PART II: REACT.JS

react js library Cover image

 

In the past decade, we have observed a massive growth in modern web and mobile applications powered by lightweight and sophisticated JavaScript libraries. Better user experience is now derived from the speed of the application and scalability across devices. To keep the students updated on effective ways to build web apps, a good portion of the FEND course was dedicated to an introduction to a plethora of JavaScript libraries and frameworks. For the time limitations, curriculum kept the information relatively basic, explaining the benefits and downfalls of each one of them. However, students were given the resources and were strongly encouraged to explore on their own to find the one which fits their project and workflow best.

More focus was given to a relatively young – yet increasingly more popular JS library named React.js.

React.js (also known as ReactJS) is a Javascript library for building user interfaces and web applications. It enables the creation of high performance, agile applications with the amazing user experience, supporting both front-end development as well as the server side. React can be used in the development of web applications and native mobile applications. It is important to make a distinction between React.js – a JavaScript library used to build web apps and React Native – a mobile framework used to build native mobile applications (iOS, Android, and Windows) in JavaScript. Note, in this text we are discussing the library, not the framework!

React was developed by Facebook in 2011 and given open-source status in 2013. For a bit of history, check out the timeline below! It has achieved immense popularity within the domain of online, web-based businesses.

Timeline of development with React.js

React was created with a business-forward mindset: leveraging faster web-page load speed, SEO friendliness, and code reusability by combining the two technologies.

Being a library which is typically used in combination with other JavaScript frameworks, React.js has a significant advantage. Due to its relatively short learning curve businesses were quick to grasp and embrace this technology. Some of the most prominent names of web-services using React shell architecture for their products are Facebook, Instagram, Netflix, Whatsapp, Uber, Dropbox, and many, many others.

 

Technical characteristics of React.js

So why is React.js so popular? There are several key features which make this library so powerful.

Advantages of React library

Let’s break down each of this characteristics to explain what are benefits of working with React.js.

 

Reusability: components which can be used across multiple user interfaces

Components are module-like snippets of code. Each represents a particular part of the user interface. They can be reused: each component can be repeated across as many pages as needed. One can think of them as building blocks of an app.

Another interesting aspect of React is its declarative style:  it allows the developer to control flow and state in the application by simply requesting task to be done (as opposed to an imperative style, which expects every step of the task explicitly programmed). The benefit of declarative is that developer doesn’t need to worry with the implementation details of representing the state. Instead, they only delegate the organizational component of keeping the application views consistent – so all the developer needs to keep track of is component state. This makes designing UI seamless and margin for error much narrower as well as the debugging process much more smooth.

 

„Funny tag“ syntax: JSX

JSX is a shorthand for JavaScript XML- a syntax extension to JavaScript. JSX utilizes the expressiveness of JavaScript along with HTML-like template syntax. React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display. Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with components which contain both.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. Since JSX is not a regular JavaScript object, to enable a browser to read JSX, it is necessary to transform JSX file into a JavaScript object first and then pass it to the browser. It’s achieved by using JSX transformers like Babel.

 

Data flow: Props and the State

React controls the data flow in the components with state and props. The data in states and props are used to render the Component with dynamic data. In React.js every component is treated as a pure JavaScript function.

Props is the shorthand for Properties in React. They are used to send data to components, which would make them an equivalent to parameters of a pure JavaScript function. Props are developed in the concept of pure functions where it’s not possible to change the data of parameters. Therefore, they are immutable. They are always passed down from the parent to the child components throughout the application. A child component can never send a prop back to the parent component. This helps in maintaining the unidirectional data flow. Props are generally used to render the dynamically generated data.

States are the objects which determine components rendering and behavior. States are the source of data and must be kept as simple as possible. They are mutable unlike the props and create dynamic and interactive components. They are accessed via this.state(). States are mostly used to update the component when the user performed some action like clicking a button, typing some text, pressing some key, etc.

Comparison between ReactJS state and props

Virtual DOM: no more negative performance impact from updating DOM often

React uses Virtual DOM that makes the app fast. The idea of Virtual DOM helps allows React to know when exactly to re-render or when to ignore some specific pieces of DOM because it can detect when the data has changed. UI that reacts promptly is crucial in enhancing the user experience.

How does webpage come to life on your browser screen?  When a web page is loaded, the browser creates a Document Object Model (DOM) of the page. The DOM is constructed as a tree of Objects.  Rendering engine responsible for displaying (rendering) the webpage on the browser screen interprets (parses) the HTML page to create HTML DOM. It also parses the CSS and applies the CSS to the HTML creating a render tree. The render tree is the one that is actually rendered onto the page.  Now, when UI changes – whole this process of parsing HTML and CSS is happening all over again in order to create new DOM which represents new render tree. This process is quite costly and affects the performance.

web page parsing

 

Virtual DOM solves the problem of re-rendering the page so often  – and is the very reason why these fast, scalable web apps built with React.js are possible. Virtual DOM is an in-memory representation of the real DOM. It is a lightweight JavaScript object which is a copy of the real DOM. Through React’s memory reconciliation algorithm, the library constructs a representation of the page in a virtual memory, where it performs the necessary updates before rendering the final web-page into the browser.

how virtual DOM works

 

What makes react Great for Business?

React.js boosts performance

React is self-sufficient; which means that while it’s possible to use it in combination with other frameworks and libraries, they are usually not necessary. This means that other code-heavy frameworks and libraries can be eliminated  – which increases the speed of the application. However, as discussed in the previous paragraph; the real power of React lays in virtual DOM and its swift rendering capabilities – which contribute the most to app’s performance overall.

SEO-friendly: React.js offers seamless SEO Integration

Search Engine Optimization is the key to get the website visible in search engines and boost user traffic onto the platform. There was a time when search engine crawlers were unable to recognize content outside of HTML. However, in 2016 Google introduced a new version of Googlebot which is now able to crawl and index all the script files (including JS and CSS). React’s biggest asset in this race is its capability to reduce page load time through faster rendering speed and adapt performance in real-time based on current user traffic. Faster speed not only boosts the traffic on the platform but also helps to improve app’s ranking on the search engine.

React.js is simple to migrate to and meshes well with other technologies

When a business decides to migrate from older technological infrastructure to a new one, it’s always a long process which includes retraining the staff. With React, however, learning is fast – because it is based on plain old vanilla JavaScript. For the same reason, React code can also be added anywhere onto existing infrastructure without worry of shutting down the system for maintenance. React makes use of very familiar HTML and Javascript frameworks by integrating them together into a syntax extension for  JavaScript called JSX. Adding some CSS to the mix and it results with pretty advanced looking web-interfaces. It is also API friendly and extensible across a multitude of frameworks.

Testing and debugging are fairly smooth

In development, unit testing is very important. It ensures that code is up to the standards, and enhances the stability of the platform. The fact that React is a library of smaller modules – components – allows developers to efficiently perform unit testing on each of them, making sure there are no weak spots in the system. It also saves time as no redundant tests need to be performed.

React is also much easier to debug than an average JS framework. Facebook has created a dedicated debugging mechanism to isolate UI errors and bugs to the exact component causing it. The browser itself outlines the relevant data about the erroneous line of code, web page and/or section to make the required correction, making lives of developers a whole lot easier.

reasons why is reactjs great for business: modern looking user interface, enhanced user experience, better user engagement, higher click-through rates, higher conversion rates, faster performance, allows modified build tooling, lower maintenance budget, quick to learn, seo friendly

As a final note, React’s relevance in today’s market is growing as more businesses recognize its benefits. With users getting used to having content served immediately on demand, even milliseconds make a difference. Entrepreneurs and developers are always looking for better methods of giving their businesses a competitive advantage. React is a library which can be utilized to create modern, beautiful and high-performance applications. It is a technology which helps enterprises to outdo their competitors when it comes to creating web applications which drive user leads and, finally, monetary sales.

 

All the information from the above article we compiled into an infographic on React.js; which you can download as .pdf below.

Download an Infographic on React.js

 

Conclusion

Every now and then, it’s not a bad idea to re-evaluate where one stands in their profession. More so when it comes to Information Technology. Things are changing fast and we need to keep up with the changes: be informed at the very least – if not embrace them completely.

That’s why we at 10vorne appreciated this opportunity given to us by Google and Udacity. It’s sometimes difficult to keep track of all of the „next great things“ in the industry. We often get lulled in our comfort zone and do the thing we are good at – over and over and over again. Thing is, the world of web development never stops developing! New algorithms, approaches, frameworks, libraries –even the familiar JS tends to fundamentally change every so often. We, as a team of developers and marketers, have an obligation to keep up with those changes, if not for our own curiosity – then at least out of the responsibility to our clients. Changes inevitably make an impact on businesses‘ online presence – either to boost the traffic or slump it!

While important, changes are often overwhelming. Any guidance is of an immense help. That is exactly what participating in this Scholarship meant to us: an opportunity to catch up with the trends, learn new tricks of the trade and add some more tools to our toolbox. Grow as developers, and help our clients to grow their businesses even further.

For the past nine months, we have come a long way. We feel obliged to say that the journey was – if challenging at times – throughout enjoyable. What made it even more special was the community – both students and mentors, which we are very grateful for and hereby thank each and every one of them! This course provided us in 10Vorne with new tools to make our applications fast, reliable and scalable across browsers and devices. Our team has one goal: to create modern, enjoyable user experiences which convert! These new tools we acquired through Udacity’s Nanodegree will help us to help you better. 

If you are in need of a modern app or feel like your old web app is falling short in its performance and conversion – feel free to contact us. We will happily assist you to make it ready for the competitive web market and make sure it lives up to the task!

 


References:

Share your thoughts

%d Bloggern gefällt das: