Web development, the good parts

Last week was dedicated to front-end development. We made some nice progress there, thanks to LazoJS framework and Jason Strimpel himself. This framework, supported by the entire Node.JS ecosystem, makes development quite simple even for somebody so unexperienced in UI like me.

Of course, Node.js has some drawbacks. For example, its performance is worse than the performance of golang code, pushed to the extreme. There also are a lot of bad things in JavaScript development itself: callback hell, memory leaks, relatively poor debugging experience, low quality of some public packages.

However, if you consciously stick with the good parts and avoid the bad ones, the experience can be quite rewarding.

First of all, since our front-end code is rather simple and stateless, we could always solve some performance problems by getting another machine. This would be much cheaper, than the time of a developer.

Virtual Machines are available starting from a few dollars per month. That is probably cheaper than a few hours of development.

Second, Node.js has diverse ecosystem of things that help you develop web applications. If you pick a few good ones and stick with them, your life becomes simpler, speeding up the development. Here are some that were adopted last week:

• ESLint - pluggable linting utility that checks for common styling and syntax issues on JavaScript code. We adopted the style of Felix Geisendörfer for our project. ESLint is a part of our build now. If there is an extra comma at the end of array or some trailing space - it will fail the entire build.
• JSFmt - utility for formatting, searching, and rewriting JavaScript. Whenever a file is saved to disk, we automatically reformat it.
• Reflex - runs a command or restarts a server whenever sources are changed. This reduces development friction a lot. Kudos go to Pieter for finding this one.
• Flycheck - syntax checking extension for Emacs that runs ESLint in the background.
• node-inspector - Node.js debugger based on Blink Developer Tools. We use it via the node-debug wrapper.
• web-mode - HTML template editing mode for Emacs that understands embedded CSS, Handlebars and Javascript.
• Lazo.js - client-server web framework for building responsive applications. It deserves a separate podcast. BackboneJS, UnderscoreJS and jQuery come in bundled.

Besides, there is PhantomJS (headless WebKit scriptable with JS) which could be used to verify UI use-cases. If we make these use-cases runnable against BrowserStack, then we have all operating systems and browsers covered for us.

Feature-wise, we implemented infinite scrolling for our feeds, started working on real-time notifications (highlighting menu items which contain new content). Pieter was also implementing the profile UI.

Tomas will join HPC2 development effort later this week. Last week he deployed a new like feature to HPC1, to start capturing information about the most popular content (we could use it to populate feeds in HPC2). It was used almost a hundred thousand times within the first 24 hours!

Published: September 23, 2014.

Next post in HappyPancake story: Reactive User Experience

🤗 Check out my newsletter! It is about building products with ChatGPT and LLMs: latest news, technical insights and my journey. Check out it out