devBlog of Michal Zalecki

Why I use double quotes in JavaScript

Coding style is often a topic of fierce debates, mostly unnecessary. What matters is being consistent throughout the project, or better, your entire codebase. Tools like JSHint, JSCS and ESLint contribute and popularized advantages which comes from keeping code style consistent. I’m used to airbnb/javascript style guide with couple exceptions and this post justify my decision to go for double quotes in our entire JavaScript codebase.

Set up Selenium for Firefox and Chrome

Automated browser tests, in my case, are often part of continuous integration (CI). Failure = no deploy. This naturally creates some expectations towards acceptance/end to end testing framework. I haven’t found the tool which would meet all requirements although CodeceptJS is close. Nevertheless, no matter whether you use Protractor, Nightwatch.js, WebdriverIO, CodeceptJS or anything else based on Selenium you need to set it up and make it talk to the browser.

Progressive Web Apps with Webpack

My first offline web app heavily depended on AppCache and it was painful experience. Don’t get me wrong, AppCache initially blow my mind, in a positive sense. Web App without a web? In the browser? Sounds awesome, isn’t it? My further experiments with AppCache convinced me that unfortunately it’s not the path I’d like to follow when it comes to building something serious.

TypeScript vs Flow

TypeScript calls itself a JavaScript superset and compiler while Flow is a static type checker. TypeScript is developed by Microsoft and highly inspired by C# or Java type systems. What I find interesting is that TypeScript is actually written in TypeScript. Flow is created by Facebook, written in OCaml. Most TypeScript annotations are compatible also with Flow so learning curve for switching from one to another is really smooth.

Simplifying data with object mappers

We are designing our applications for better separation and many patterns evolved from that effort. It’s not any different in case of projects I have done. There were couple architectures along the way and tries to simplify all of the building block no matter whether it was MVC, MVVM, Flux, Redux and so on. The glue for all of those elements is data. At the end of the day everything operates or consumes data. When you make your data model flat and decoupled form API you gain full control over modeling you application state.

Reduce side effects in React/Redux

Pure functions are functions which for certain input always returns the same output without modifying its surroundings. So, they are free from side effects. Because of that feature they are easy to test and highly reliable part of your system. Why only a part? There is a lot of different side effects and it’s more probably than not that your app is full of them. Every DOM mutation, API request, pushState or even console.log is a side effect. It’s hard to imagine an useful application without side effects.

Use RxJS with React

At first sight RxJS is blown up lodash but for dealing also with async. In reality it’s so much more than that. With a few simple operators you can implement Redux-like state machine, schedule animation or deal with any type of events no matter whether it’s WebSocket message or filling in the text input.

RxJS and Cycle.js

I gave the presentation on Warsaw and Wrocław meet.js meetups about RxJS and Cycle.js. Until the same meetup I had doubts whether live coding is the best way to introduce the audience in the topic of reactive programming in JavaScript. Apparently it went way beyond my expectations. I got many questions both in Wrocław and Warsaw and really positive feedback!

The problem of Flux

On 16th December I had a pleasure to give the presentation about Flux architecture pattern on ReactJS Wrocław meetup. Flux is well known in React community and has many different implementations not without reason. After short introduction I pointed out 7 common problems and compered how different implementations are trying to solve them.

Lazy load AngularJS with Webpack

When your SPA is growing its download time is getting longer and longer. That’s not going hand in hand with better user experience (remainder: that’s why we are doing SPAs). More code means bigger files and when minification isn’t enough for you the only thing you can do for your user is stop making him to download whole app at once. Here lazy loading comes in handy. Instead downloading every file let your user download only files which he need NOW, at this very page.