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.
“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
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.
- Microsoft Edge.
- Microsoft Internet Explorer.
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/
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 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.
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