Alexander Beletsky's development blog

My profession is engineering

Your First Steps in a Front-end Developer Career

A couple of weeks ago, I’ve been contacted by a friend of mine, who is just starting his career as a front-end developer.

It’s very typical when a start of the journey is frustrating, and there is nothing better than the advice from the people who already been there.

I never thought about that question carefully, but I formulated something quick for him. But later I decided to elaborate on it and share it with a bigger audience.

Redux For Better in-App Analytics

Lean startup, the term coined by Eric Ries, affected the way we build new products and services. Essentially, it says that every business idea has to be turned to a series of testable hypotheses. Based on these hypotheses we build or introduce the changes to existing products. Those changes have to be measurable, so we collect the results of actions we did. Based on results we prove or disapprove particular hypothesis. During the cycle, we derive learnings, these learnings give a foundation for a next Build-Measure-Learn cycle.

Higher Order Components: Theory and Practice

What I enjoy the most working with React.js is its functional approach for building UI’s. Everything you see on a screen is essentially a component. Components are composed of other components, making complex interfaces possible.

Higher-order components concept goes back to higher-order functions, functional programming concept, describing the function that takes other function(s) and returns a function. In exactly the same way, higher-order component takes another component(s) and return a component.

Where might it be useful? Let’s consider a few practical cases.

The Functional Approach to UI

A state is a representation of a system in a given time. Traditionally, we deal with mutable state storages, like SQL and NoSQL databases.

Each update destroys previous value, there is no history what value had been stored a minute ago, an hour ago or 5 years ago.

Likeastore is Shutting Down

In July 2013, we’ve launched Likeastore. We wanted to solve one problem – keep content that caught your attention in one place. To make it happen we’ve built a solution that synchronizes favorited items from different social networks with a beautiful dashboard and browser extension to provide great search experience.

Jumpstart to React+Redux Development

Somewhere November 2015, we realized that our existing product requires a proper update since it remained in a beta phase, for quite some time. We were thinking, what would be the best approach to take?

There are many things you need to consider, but primarily – business and technological risks. For companies, with an established customers base, value proposition and product, taking a risk of a massive rewrite is always very high. For startups, speed to market and responsiveness to change is a priority, so they are pivoting and rewriting products from scratch.

NPM for Everything

JS ecosystem is famous for it’s wide range of packages and tools. Besides the default package manager, which comes with Node.js – NPM (node package manager), there are Bower.js, Jam.js and many more.

For a quite long period, my default setup was like – NPM for all server-side components and Bower.js for client-side stuff. It worked quite good together, especially in conjunction with Require.js.

But recently, I switched to NPM only setup. That allowed me to use CommonJS style both front and back ends and got rid of task runners as Grunt and Gulp.

Configuring Front-End Applications

Typically front-end applications have particular configuration, depending on environment. It could be access tokens, API URL’s, applications settings etc. For quite long period of time I solved that problem by exposing window.env variable, populated either by server rendering or by plugins as html-build .. or just directly referencing <script src="config/my.env.js">, where my.env.js needed to be updated before actual deployment.

Spending much time on backend and working with Node.js/CommonJS I liked simplicity of config pattern and wanted to reuse that pattern on frontend. It’s really straightforward and framework-agnostic approach.

Health Monitoring of Services and Databases

Once you are up and running your primary job is to monitor that all your services are in good health. If something bad happens, network issue or crashes – you have to be notified on that as soon as possible. Hardering of the HTTP services and databases became a one of primary activities for any startup.

There few products on market that can do that, Pingdom and New Relic probably the most know. But they are paid and not that flexible as I want. So, I’ve created likeastore/heartbeat that for a month or so helps me to provide quality service.

Email, SMS and Push Notifications Server

I recently came up with very convenient component – likeastore/notifier. Notifier is easy to setup Email, SMS and Push Notifications Server. It’s been open sourced few month, very specific to Likeastore needs, but due to great contributions it became very generic and can be used in your projects as well.

Once you need to setup infrastructure for notifications in your application, it will be really easy to do. It provides transport of Mandrill, Twilio, Android and iOS push notifications.