Project Background
Lazy Loans™ was a project created to solve several common web challenges including minimizing initial page loads, simplifying development, scaling effectively all within a highly responsive framework. This project was initially created in React using Redux for global state management and React Router to support Single Page Applications. By significantly leveraging Dynamic Importing virtually everything becomes a loadable dynamic component that is loaded only when needed thus eliminating scaling issues. Dynamic imports or “Lazy Loading” is applied to pages, page components or “modules”, Redux stores, images, video and content.
On page loads only visible components are loaded and rendered which greatly improves the users experience particularly on mobile devices with reduced data bandwidth. As the user scrolls the page dynamic components are loaded just prior to coming into view. In multiple page applications the user experience is further enhanced due to caching. The more pages share components such as headers, footers & navigation the faster the page loads.
Later the entire project was also recreated in Vue, Vuex and Vue Router. Since Vue also supports JSX syntax all the components converted very quickly. The only changes were to support Vuex instead of Redux.
Screenshots
Lighthouse Results
Roll
- Conceived
- Architected
- Designed
- Developed
Technologies Used
Conclusions
The results of this particular combination of technologies was overwhelming. The speed of development, effective visual responsive experience and fast load times exceeded expectations in both React and Vue as reflected in the Lighthouse results.
