I’m going to write two posts about what I learned during the process of developing React application. The best way to learn is by practice, so I decided to find tutorials and develop the full stack app. In the first part I’m explaining some basic terms. On the second I will mostly focus on Firebase and Firestore.
After my own experience and conversations with my friends, I concluded that there might be a need for an online place where people can find someone to solve any problem around the house or get any advice how to solve it themselves.
When I’ve done the research, I found website https://tradesman.ie where we can find professionals or tradesman for a job. I made decision that I want to do something different, that looks more than a social app, that people already know.
Two months ago, what I know about React was that it is the JavaScript library, and has some similarities to the Angular framework that I studied before. Now I know much more and I want to share what I learned . Especially, I want to shed the light on important things when someone is starting with react, explaining some basic concepts and then cover some more difficult ones.
“An error. Another error. Yet, in his experience, refusal to acknowledge an error did not reset circumstance to an error-free state.”
― Sharon Lee, Dragon Ship
In the old-time browsers were much less capable than today. Every time you interacted with a new page, a new request was made, and server and the browser subsequently loaded the new page. Today we have frontend JavaScript frameworks like React, Angular, Vue and app is in most cases built as a single page application. In the progress of new discoveries, technology sometimes stays the same, but the philosophy and some key components of how it works are different. In SPA, when you interact with the application, JavaScript intercepts the browser events, and SPA only boots data on-demand while the entire page has previously been loaded. Making use of a single page app can significantly decrease the server load and enhance loading speed. Single Page Applications are easy to transform into PWA, but if we look at it from another perspective there are also some disadvantages. One of them is that SPAs are best used when there is no need for SEO, for example, apps that work behind a login. Search engines still have trouble indexing sites built with a SPA. If you are going to heavily rely on search engines it is not recommended to build a SPA.
PWA
What is PWA? PWA stands for Progressive Web Application. If we look at web app, user can interact with it by using the browser like
- Mozilla Firefox.
- Google Chrome.
- Opera.
- Microsoft Edge.
- Microsoft Internet Explorer.
- Vivaldi.
On the other hand, native app is an app installed on mobile devices, we do not need any browser. PWA is new technology introduced by google, that aims to connect both, web app experience with features of the native app. PWA is web application that can be installed on your device whether it is mobile, desktop or laptop. There are basic requirements for web app to become PWA. First one and the most important feature from user perspective is that PWA can work offline by leveraging data cached during the last visit. Responsible for that is Service Worker. It acts as the network proxy, SW intercepts any requests made to network, and checks to see whether there is a need to connect to network. The reason for that is because Service Worker tries to access cache API, and if the content is available, it is not sending another request, just serving files from cache API. In simple words with Service Worker, we are telling browser before you do anything, talk to Service Worker, maybe he got something for us.
The second one is that app must be served from the https protocol.
App Manifest is the next one. That is the JSON file that gives the instructions how application will be presented to the user. The purpose is to mimic some views of native apps. That is also one factor that makes PWA indistinguishable from mobile apps. Below I added the screen shot from lighthouse report of HandyamnHire App. Lighthouse is an automated tool that can help to improve the quality of web pages. It can be run against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more. It can also be use as a chrome extension.
More information on PWA on google developer website https://developers.google.com/web/progressive-web-apps/
React
The definition of React is : “React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded”
React is implementing the Flux architecture developed also by Facebook. It is an alternative to the popular MVC architecture. Flux is based on actions which are sent through a central dispatcher to a store, and changes to the store are propagated back to the view. It is accomplished through component properties. Flux is a variant of observer pattern. The main idea behind React is to build websites like the logo blocks by using loosely coupled components that are used to split UI. They are like JavaScript functions. Accept inputs called “props” and return react elements which are describing what should be displayed. One of the concept in react is the separations of concerns. It means that your components are responsible only for one of two things. Having state and containing all the functionality to display HTML or JSX. We do not want to type anything into presentation, because that is responsible for render our component. This makes the concerns separated, therefore if we need to add functionality, we will go to the container component, and if we need to style or change the structure of how our component is structured, we will just go to the presentational component. What is worth to mention React is not giving all tools needed like frameworks. React only cares about UI, rest is up to you. You can use other modules or whatever technology stack you want. Virtual DOM is providing the blueprint how react should update actual DOM. Data only flows one way (Unidirectional data flow). By having this restriction, it is easier to debug the code. One of the security advantage of react is that escapes any values embedded in JSX before rendering them. It’s mean that there is impossible to inject anything that is not explicitly written in application. This helps prevent XSS cross site scripting.
Redux
Redux, as I mentioned, is a state management tool. There is not always need to use state container when building react or another framework or library app. When your app is getting bigger it can be source of confusion where a state should live. Especially when data is shared between many components. In ideal situation data should live in one component but it is not always possible. What Redux provides is a central store that holds entire state of your application. There is no need to send down props from one to another component. The advantage of using Redux is that it can help to write an app that behaves constantly, can run in different environments, and is easy to test. There are three building parts:
- Actions
- Stores
- Reducers
Actions are the way of sending data from app to Redux store. Data from user interactions, API calls, or form submissions.
Reducers are functions which takes the current state of app, perform any actions and returns new state. They are stored as objects and specify state of app changes in response to an action sent to the store. There is only one store and one general state to the store. Each component has access to the state.
By using Redux states no longer need to be lifted. It makes easier to trace actions. Components do not provide any state or method for its children components to store data. That simplifies application and makes it easier to maintain.
Summary
That’s the technologies use to develop user interface. Firestore and Firebase was use for back end development , but I am going to provide more details about it in second part, where I will explain also some structure and code in my application. Important thing to remember when building react app is is to :
- Decide on components
- Decide on states and where it lives
- What changes when state changes
“CRITICISM is part of LEARNING and GROWTH. It
means that you are taking INITIATIVES to learn something new and grow over from
your current state. If you are not getting criticized, it means you are not
taking enough RISK to learn something new and to grow.”
― Sanjeev Himachali
Thank you for reading. I appreciate any comments or feedback. If you have any questions or suggestions please contact me
Arkadiusz Lesica