This is a project that needs to be done for me to graduate from Frontend Developer Expert Course by Dicoding. The application created may be simple in terms of features. But this class put more concern to ensure robust performance by considering Metric Web Vitals which -- to my surprise -- affects many area in development phase.
In addition, there is a statistic that signifies of increasing mobile web percentage over these past few years.
Knowing these facts, the question is :
> How do we make a website accessed across mulitple device while delivering its best performance ?
To answer such questions, we were given a case study to create a restaurant app. To deliver such high performance, there are multiple ways that are implemented in this project :
- Clean Code Javascript
In software development, the quality of the product includes how maintainable the program is. Some approaches are being implemented in here are:- SOLID: Single Responsibility Principle, Open/Closed Principle
- ESLint for common code conventions
- Error Handling
- Progressive Web Apps
This is the part where we can make our website to be used more natively while user access it through mobile phones or tablets (e.g. using push notification). Moreover, this enables offline-mode capability through configured cache management with Service Worker. - Automation Testing
By implementing TDD (Test Driven Development) and making it automated, bugs can be detected earlier and easier. In this project i used Jasmine for component and API Testing. While Puppeteer is used for E2E Testing - Web Performance
Either in development or production phase, we can keep track of website performance through Lighthouse. Below are factors that has been implemented and gives improved loading speed to our website :- Image Compression with webpack plugin
- Lazy Load Image
- Code Splitting with Bundle Analyzer
Landing Page
List Restaurants
Detail Restaurant
Favorite Page | Empty
Favorite Page | Restaurant Exist
