From Web to App 1

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.

Why

So, where is this idea coming from?

Back in the time when I was at fifth grade in elementary school, I was given a task to create a web page for my class. That was my first experience with web “development”, I used Microsoft Front Page to create static web pages, write some HTML I learnt from books with few CSS styling (Adobe DreamWaver was starting to trend at that time, but it was too complicated for me). Quickly, I learned how to copy javascript (yes, few website uglify and minify js at that time) from other website source code to add some “features” to my static website. The biggest accomplishment I could remember is a big clock sticky to the right bottom corner of my page while scrolling. I deployed my website using ftp protocol simpliy by copy and pasting the files to the server.

What web can do today has been largely changed in the past decades, morden JavaScript also changed not only in its syntax but also the way developers work with it. Babel, ES6 and frameworks such as react.js and vue.js changed the way programmers think about web development. Though browser still works with HTML(5), stylesheets and javascript, just like old days, developers no longer have to deal with large trunk of codes, instead, they write clean, small and manageable modules, based on which to compose complicated multi function web application. The history has buried Flash, which put web app more dependent on advanced javascript techniques. The revolution does not only happen in the web frontend, node.js enables javascript to jail break browsers and runs almost everywhere, including server or serverless backends.

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.

Implementation

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:

JavaScript + TypeScript

Programing languages that runs on both backend and frontend. Intially when I heard of TypeScript, I thought it’s a bad idea, as it seems to bring back the nuisance from C++, which is what JavaScript tends to avoid. But it’s actually brilliant which gives quick hints and type check during the development, it could speed up development a lot. (I still don’t like TSLint though)

Next.js + React.js

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.

Other good options here would be Nuxt.js + Vue.js.

When choosing frameworks, libraries and tools, I found some good resource:

Material-UI

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.

Jest.js + Enzyme

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

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.

Setup

Git

Init git repository.

1
2
3
4
5
6
7
touch README.md LICENSE
...
git init
git add --all
git commit -m "Initial commit"
git remote add origin [email protected]:shadowwalker/FWTA.git
git push -u origin master

Add .gitignore generated from here.

1
2
touch .gitignore
...

Yarn

Init with yarn.

1
2
yarn init
...

Install Dependencies

We are going to start with next.js and react.js, this give you SSR by default.

1
yarn add next react react-dom

First Web App with SSR

Index

Create a pages folder with a index.js file.

1
2
3
mkdir pages
cd pages
touch index.js

Modify index.js with following.

1
export default () => (<div>FWTA first web app</div>)

Scripts

Add some scripts in package.json for convenience.

1
2
3
4
5
6
7
...
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
...

Run Development Server

Start dev server. This create a temp .next folder to save files compiled.

1
yarn dev

Now you can access your SSR web app at localhost:3000, hot reloading is enabled during development for free.

Summary

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.

Next

Deploy to firebase, static hosting, serverless functions, SSL and more…