From Web to App 3

Posted on Edited on In Views: Disqus:

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:

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
font-family: system-ui,
             -apple-system,
             BlinkMacSystemFont,
             Microsoft YaHei,
             Segoe UI,
             Roboto,
             Oxygen,
             Ubuntu,
             Cantarell,
             Fira Sans,
             Droid Sans,
             Helvetica Neue,
             sans-serif;
}

A new system-ui is added to the top to simplify the usage of font from system, check availability.

Icons

Here is list of good icons resources.

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
2
yarn add -D typescript @zeit/next-typescript
yarn add -D @types/next @types/react @types/react-dom

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.

The Web App Manifest - Google Developers

Web App Manifest - MDN

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.

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
weiwio:FWTA weiw$ ls -ohSR dist/functions/pages
total 10656
-rw-r--r--  1 weiw   887K Apr 20 21:42 index.js
-rw-r--r--  1 weiw   886K Apr 20 21:42 explore.js
-rw-r--r--  1 weiw   886K Apr 20 21:42 feed.js
-rw-r--r--  1 weiw   886K Apr 20 21:42 new.js
-rw-r--r--  1 weiw   886K Apr 20 21:42 me.js
-rw-r--r--  1 weiw   886K Apr 20 21:42 _error.js

weiwio:FWTA weiw$ ls -ohSR dist/public/_next/static
total 0
drwxr-xr-x  4 weiw   128B Apr 20 21:42 runtime
drwxr-xr-x  3 weiw    96B Apr 20 21:42 XYQB7Jy2lKteqMICynujp
drwxr-xr-x  3 weiw    96B Apr 20 21:42 chunks

dist/public/_next/static/runtime:
total 200
-rw-r--r--  1 weiw    92K Apr 20 21:42 main-06c512ec64fb9631c29a.js
-rw-r--r--  1 weiw   1.5K Apr 20 21:42 webpack-a79426b5e11f0ba5879d.js

dist/public/_next/static/XYQB7Jy2lKteqMICynujp:
total 0
drwxr-xr-x  9 weiw   288B Apr 20 21:42 pages

dist/public/_next/static/XYQB7Jy2lKteqMICynujp/pages:
total 600
-rw-r--r--  1 weiw   241K Apr 20 21:42 _app.js
-rw-r--r--  1 weiw    36K Apr 20 21:42 _error.js
-rw-r--r--  1 weiw   2.3K Apr 20 21:42 index.js
-rw-r--r--  1 weiw   1.3K Apr 20 21:42 explore.js
-rw-r--r--  1 weiw   1.3K Apr 20 21:42 feed.js
-rw-r--r--  1 weiw   1.3K Apr 20 21:42 me.js
-rw-r--r--  1 weiw   1.3K Apr 20 21:42 new.js

dist/public/_next/static/chunks:
total 224
-rw-r--r--  1 weiw   110K Apr 20 21:42 commons.635a9eee6d171762a8dc.js

Code start time (haven’t seen any problem with cold start)

Lighthouse report

  • 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.