FWTA is a project embraces the vision to create cross-platform mobile first applications using morden web technologies and best practices, such as Server Side Rendering (SSR), Progressive Web Application (PWA), Accelerated Mobile Pages (AMP), PRPL Pattern, Severless Backend.
The final product of FWTA would be a cross-platform mobile progressive web app which
- has user experience and features close to native app
- runs on major platforms with responsive design
- optimizes performance on major platforms
- is discoverable using search engine (SEO)
- is hosted on serverless cloud infrastructure
- runs with offline support
- updates seamlessly
- distribute freely without app store
This is one of the article series which records thoughts and notes during my implementation of FWTA.
First things first, let’s get started and setup the project.
So, where is this idea coming from?
There is no doubt that web has become stronger and anywhere, this is an achievement by putting decades of efforts from large tech companies together with W3C to standardize web experience.
Nowadays, it’s possible to create web app close to native app which does exactly same job. Even in cases where there are limitations for pure web app, the emerging hybrid frameworks such as electron.js, ionic.js and react native could come to rescue. Those frameworks have made a lot of famous application possible, such as VS Code and Facebook.
FWTA is a demonstration of what web app can do compare to native apps, by exploring and pushing boundaries of current tools and technologies. But when it comes to implementation, I have to choose a relatively wise path to achieve the goal, my choose of frameworks and implementation is based on my experience. Here is a list of major building blocks I would use:
Like a lot others in the community, these are my favorite frameworks so far. There are still a list of things I want to explore:
- Use AMP to optimize page load performance - example
- Explore if it’s worth to use light weight Preact.js instead of react - example
- Another interesting alternative lit-html from Polymer Project, this experimental project is created by teams from Google Chrome, and the performance is great.
- Revisit RPRL Pattern for further performance optimization.
When choosing frameworks, libraries and tools, I found some good resource:
- JS Frameworks Benchmark by Stefan Krause
- JS Bundlers Comparison by AJ Meyghani
- JS Frameworks Battle using benchmark above by AJ Meyghani
Material Design seems to be the new fashion as Google leads the trend, material-ui is a very good UI component library implemented the design language in react. There are bunch of other great frameworks as well, sky is the limit.
One benefit of utilizing modular component based concept is that it’s easy to implement tests. They make products more robust and reliable.
There are so many other good staff, but all the projects above are backed by strong and active open source community, enough to build confidence in production use.
Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build Progressive Web Apps.
Init git repository.
touch README.md LICENSE
.gitignore generated from here.
Init with yarn.
yarn add next react react-dom
pages folder with a
Modify index.js with following.
export default () => (<div>FWTA first web app</div>)
Add some scripts in
package.json for convenience.
Start dev server. This create a temp
.next folder to save files compiled.
Now you can access your SSR web app at localhost:3000, hot reloading is enabled during development for free.
To recap, I have created a SSR web app running on node.js with next.js and react.js framework. You can find a snapshot commit here.
Deploy to firebase, static hosting, serverless functions, SSL and more…