Web App – The Beginning
When I was JC2 long time ago, web app was simple. When I googled for a tutorial on how to build a web app, the approach that I came up with was:
- Proprietary server to host the app. I used Union Server because it has documented examples.
- HTML, CSS, jQuery UI for the front-end user interface. (It seems that nobody uses jQuery UI anymore)
- jQuery, JavaScript for handling user interactions.
Since the proprietary server has a JavaScript client, with very easy to use APIs, the development was quite easy. I thought I had known everything that I need to know to become a web developer, but I was so wrong.
After I came to NUS, the first project that I did was for the Orbital Programme, which my team had the idea of building of a visualization of relationships between tech terms. This was partly because we felt overwhelmed by the amount of terms that we hear everyday in the computing community, especially in tech forums and news. This time round, I tried sometime new. For the first time, I built an entire server (based on an example). I learnt a lot of new technologies from this experience:
- Node.js server. That was the hot thing in 2013, so I picked it up on my own. But it turned out that there are a few other things that “comes together” with it:
- Express, Node.js web application framework
- Jade, Node.js templating engine. (An alternative was Handlebars.js, which I later learnt)
- npm, Node package manager.
- MongoDB, the default database for Node.js.
- Neo4j, the graph database that was recommended to store terms and relationships.
- git, version control software. (I was lucky enough to start off with the CLI version because at the time the GUI version was bad)
- Heroku, free cloud host service for the Node.js app.
- d3.js, front-end JavaScript library for data-driven DOM/SVG manipulation.
- Markdown, for writing README.md and documentations.
“Huh? What is that?”
After the project was done, I felt great, because now I thought I “really knew” enough to build a web app. The truth couldn’t be further. When I talked to friends and project mates about web development, they started throwing out terms that I never heard of:
- Angular.js, part of the MEAN stack (MongoDB, Express, Angular.js, Node.js). Actually I googled about this before, but it seemed to intimidating for me at the time.
- Travis (Continuous Integration), auto building for when new code is integrated, to allow frequent integration.
- Docker, “containerazation” of web apps for deployment in different environments.
I then spent time figuring out where do those technologies fit in, in the web development process, and how to use them. Slowly but surely, I became more and more familiar with the terms and I felt comfortable talking to others on web development and give my opinions on why we should avoid jQuery and use VanilaJS.
During my internship in year 3, I also worked on a web project. This time I took up a new challenge of writing the server in another language, and learnt a few more new tricks:
- Golang, the hot language in 2015 and the choice of language for server, much better than Java in my opinion, although I did not really enjoy figuring out when to use pointers and when not. Also it was supposed to out-perform Node.js.
- Lint, checking for syntax errors and coding styles. I still use it although it is terrible when used together with d3.js.
- LESS, for extending CSS and adding some logic into it.
- Chrome Dev Tools, for CPU/Memory profiling and debugging.
More to learn
And here I am working on the most exciting project so far, socket.io, as a participant of Facebook Open Academy. It has only been less than 3 weeks and I already learnt quite a lot:
- Gulp, automated build system for web apps.
- Webpack/Browserify, JavaScript bundler and more.
- Babel, transforming JavaScript from new standards to old standards to take advantage of the future.
Of courses there are other very popular web technologies that a lot of people like but I did not mention because I have no time to try them out.
My guess is that there is no real end to this list of web technologies. And the next time someone says web app, we need to know the weight that the term carries. After all, web app is not simple.