The JavaScript ecosystem has reached a very interesting point in its history. There are members of the community overwhelmed by the learning curve required to start a new project and based on that they express JavaScript fatigue. There are also contradicting opinions announcing renaissance of JavaScript because it became truly general purpose language and dominated front-end development. So the question is, how to take advantage of all existing tools but at the same time change the first impression in a way that makes the following joke irrelevant:
Category: Web development
Migrating to Jest test runner
I have already shared my comparison of two JavaScript testing solutions where I admitted that I favor Jest over Mocha. Back then, I listed all major differences between those tools summarized with advantages and disadvantages of migrating to Jest:
Pros:
- Simpler API, less boilerplate code.
- Flexible and easy configuration.
- Test files executed in isolation.
- Advanced watch mode.
- Snapshots support = easier start with testing.
- Code coverage.
Cons:
- Another migration.
- Mocha has still a bit better performance (according to my quick tests).
My analysis got very positive feedback, with only a few little concerns, so I got encouraged to take action and verify the assumptions stated. I picked two different projects to play with to ensure both of them will uniformly benefit from using Jest.
Picking Jest over Mocha – testing tools comparison
At Automattic we use Mocha to run all tests written for Calypso project which powers WordPress.com. It also includes end-to-end tests, which live in their own repository. We have been using this setup for over 3 years now. I think it is a good moment to revisit this choice. I found this unit testing tools comparison very helpful when evaluating alternatives. I strongly agree with the conclusions shared by Martin Olsson in his article:
Staying with Javascript, I think it’s hard to ignore the momentum behind Jest. I would be awesome if someone fixed #2059 though. Then again, Mocha seems to work well enough for a lot of people.
Continue reading Picking Jest over Mocha – testing tools comparison
Time to get interactive as a performance measure
I have already published one post about Progressive Web Apps (PWA) a few months back. It looks like Google is investing a lot of efforts to make it a new standard of building websites. At the last Google I/O, there were a few announcements made related to making PWA a default feature in a few popular boilerplates and CLIs for libraries like React, Preact, Polymer or Vue. I recommend watching the following presentation by Addy Osmani:
Continue reading Time to get interactive as a performance measure
React as a cross-platform UI
I got very excited when watching this talk for React Europe by Leland Richardson:
Current state of Progressive Web Apps
I have recently spent some time investigating the current state of Progressive Web Apps (PWA). Some of you may be wondering what hides behind yet another buzzword originally proposed by Google in 2015? This is an umbrella term for certain technologies that go together to produce an app-like experience on the web. This is how it is advertised by Google on their landing page:
A new way to deliver amazing user experiences on the web.
Progressive Web Apps are user experiences that have the reach of the web, and are:
- Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.
- Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging – Feel like a natural app on the device, with an immersive user experience.
Exploring functional JavaScript
I started exploring functional programming (FP) concepts over a year ago. I have already shared my initial learning materials in one of the previous posts. It was only the beginning of my journey and today I would like to give you a much more detailed update on that topic. I picked the most interesting resources I discovered in the recent months. They helped me understand how functional programming can improve the developer’s experience when you work with JavaScript.
Calypso data kung fu – WordPress.com use case
This post is going to be used as a presentation during my upcoming talk at ReactJS Wrocław meetup. The event is planned for Thursday, September 29, 2016 at 19.00. You can find more details here.
Calypso
Calypso is the codename for a WordPress.com admin interface. This is what I wrote about it in one of my previous posts:
This is a universal (aka isomorphic) JavaScript single page app written in ES6 using webpack, express, React,
FluxRedux, WordPress Rest API and many other front-end libraries.
Continue reading Calypso data kung fu – WordPress.com use case
Using JavaScript ES6 in practice
We all know this language as JavaScript, but the official name is ECMAScript. The most recent official Ecma Standard is called ES5 (ECMAScript Language Specification Edition 5.1). It was published in June 2011 by TC39 (Ecma Technical Committee 39) – the committee evolving JavaScript. Focused development of the sixth edition started earlier in 2009, as the fifth edition was still being prepared for publication. It was initially named ES.next, but it’s widely known as ES6. This year new official name was announced ES2015 (The 2015 ECMAScript Language Specification). This is because TC39 plans to publish new version of JavaScript with small set of changes each year from now on. The final ES6 draft was published on April 14, 2015 and spec is frozen now. Formal publication is expected to be done in June 2015. Before that will happen it is already possible to get familiar with unofficial HTML version of the ES6 working draft. However I strongly recommend to check first very concise overview of ECMAScript 6 features. Another excellent resource to start with is ECMAScript 6 new features overview & comparison website that presents ES5 equivalent code next to ES6 code.
Continue reading Using JavaScript ES6 in practice
Overview of Javascript tools and frameworks
I prepared overview of possible JavaScript tools and framework that can be used to build modern web application. Most of them are used to build Czas na Rower frontend. Mentioned project uses GruntJS for tasks management, JSHint for code linting Mocha and SinonJS for unit testing, RequireJS for module loading, jQuery, Bootstrap, Flight and Backone.js for JavaScript code development. You can see more on project site on GitHub.
JavaScript tools
Code linting
JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool created by Douglas Crockford. JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.
Continue reading Overview of Javascript tools and frameworks