From Web to App 3
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.
This is one of the article series which records thoughts and notes during my implementation of FWTA.
In the previous article, I have deployed my dummy web app to firebase using its hosting and functions service. In this article, I would add some UI to make it more like an app rather than dummy web page.
Targets
There are a lot of challenges to make a web app behave similar to native app, a few things to get started:
- Prevent user zoom in/out globally on the app
- Achievable by set
user-scalable=no
in viewport meta tag.
- Achievable by set
- Hide scroll bar but still able to scroll
- Disable overscroll to refresh feature in Chrome in Android
UI Frameworks And Resources
Disclaimer: I’m a non-designer.
Material
Material Design is a design system – backed by open-source code – that helps teams build high-quality digital experiences faster. It is design language introduced by Google, I know a lot people don’t like it, but as a non-designer, this might be the best I could get. On the other hand, my experience is that the beatifulness is mostly depends on how people put basic elements into harmony rather than elements themselves. And that’s why we need designers. Material-UI is a implementation of material design in react. Which has built components could be used easily.
Fonts
Font is another key point to style and beautify the app, it also has great impact on the performance. On web, a technique to use font family stack is often used to let client browser to adapt font automatically by fallbacking to the first font available. The New System Font Stack gives a good font stack which is performance oriented by using system font first:
1 | body { |
A new
system-ui
is added to the top to simplify the usage of font from system, check availability.
- Google Fonts - For CDN hosted free font resources.
- Chinese Fonts - For Noto font on google fonts.
- 如何保证网页的字体在各平台都尽量显示为最高质量的黑体 - 知乎
- 跨平台中文字体解决方案 - GitHub
- Web 中文字体应用指南 - Ruby China
- Free Fonts For Commercial Use
Icons
Here is list of good icons resources.
- IconFont - A large collection of icons from designers.
- FontAwesome - A familiar old school pal.
- Material Design Icons
- Real Favicon Generator - For generating favicons, and other icons for PWA.
- React Native Vector Icons - This if for react native, but has a very good collection of icons.
TypeScript Setup
TypeScript help to accelerate development by providing intellisense (hint) in VS Code, and detect silly bugs during development time which would otherwise break the app in runtime. Add Dependencies:
1 | yarn add -D typescript @zeit/next-typescript |
Add tsconfig.json and .babelrc to src/app
, then update next.config.js to use typescript plugin. Change file name from src/app/pages/index.js
to src/app/pages/index.tsx
.
UI
Material-UI
I implemented a material-ui plugin for next.js called next-mui for using material-ui with next.js SSR support. Add Dependencies:
1 | yarn add -D next-mui @material-ui/[email protected] @material-ui/[email protected] @material-ui/[email protected] |
Add _app.tsx and _document.tsx to src/app/pages
as instructed in next-mui
.
Head Metas And Manifest
There are bunch of things I put into head in _document.tsx
, which should be pretty self explained. For PWA I’m going to implement later, the most important is theme-color
and manifest
, which defines where to find a manifest.json
file. A good start point of those head info could be find at PWA Start Kit - Polymer Project.
Favicons And Other Assets
Design an icon or logo could be the most easy or the most tough work. Once got the logo image, the most easy way to generated multiple size icons for web app is to use Real Favicon Generator.
Add correponding static icons and assets to src/app/static
folder.
Nav Bar
I adapted the bottom nav bar from this demo on material-ui.com.
Detailed implementation could be find on this commit. And the results looks like this. Great, this feels more like an App featuring a vertical srcoll view and a bottom navigation bar.
Peformance
File sizes
1 | weiwio:FWTA weiw$ ls -ohSR dist/functions/pages |
Code start time (haven’t seen any problem with cold start)
- Performance: 98 - Slightly decrease as we add more react code, but still good
- Accessibility: 63 - Decrease due to disable zoom and hide scrollbar
- Best Practices: 100
- SEO: 100 - Increase due to meta informantion added to head
Summary
To recap, I have added a bottom nav bar to the web app and fixed some issues in order to make the web app behave more like an native app. The snapshot commit could be found here.
Next
I will add PWA support, which makes the web app runs faster and works when offline.