JSK Weekly - July 19, 2017

JSK is Proud to Announce the Launch of Ramp Receipts

The most important news for many of us this week was Node.js security fix announcement. I'm sure that most of you have rushed to update Node version on all your projects before a disaster.

There was a large amount of good Node.js articles so it was tough decision to not include some of them in the newsletter.

One of the most interesting articles was Netanel Besal's article in which he criticizes the JS community for starting flame wars between frameworks. Instead of fighting, everyone should use that energy to do something positive and constructive for their favorite framework.

Finally, we have a good news for all of you that are interested in WebGL technology. Babylon.js 3.0 was released last week!


General

Enough with the Frameworks War

Today, I would like to talk about something that personally hurts me very much. In the last couple of months, almost every week, a new article comes out that compares the popular client-side frameworks. Yes, you know what I’m talking about. I’m not even going to put one link here because they’re not worth it.

Authored by: Netanel Basal

Why you shouldn't spend one more second choosing a JavaScript framework

Programming has a lot to do with opinion, don't you think? Well, I don't. Most of the discussions online on the unquiet realm of JavaScript development fly about "Should I stay or should I go", well, let's break down this topic.

Authored by: JavaScript Kicks

Event Delegation: Pattern or Anti-Pattern?

A significant amount of work on JavaScript toolkits and frameworks has centered around trying to fix, normalize, and optimize browser implementations. Doing so requires making many assumptions about what the problems are, how our tools will be used by developers, and what we expect of the future.

Authored by: SitePen

Announcing Babylon.js 3.0

Babylon.js is an open source framework that allows you to create stunning 3D experiences in your browser. Built with simplicity and performance in mind, it is the engine that fuels the Remix3D site or the Xbox Design Lab. Today, I'm thrilled to announce the availability of Babylon.js's biggest version ever: Babylon.js v3.0.

Authored by: JavaScript Kicks

Implementing single page architecture with vanilla JavaScript

Single page architecture is an approach used for building web apps that have smooth inter-page-transitions. The transitions are so smooth and fast that they look like native apps. The basic principle of an SPA is that all of the code is in one document (one HTML file).

Authored by: Coding is Love


JavaScript

ES8 was Released and Here are its Main New Features

The new features of the EcmaScript specification 8th edition EcmaScript 8 or EcmaScript 2017 was officially released in the end of June by TC39. It seems that we are talking a lot about EcmaScript in the last year. It's not for nothing. Currently the standard is to publish a new ES specification version once a year.

Authored by: Dor Moshe

Pattern Matching in ECMAScript

There's a stage 0 proposal for pattern matching in JavaScript. In this article, we'll take a look at what the proposal entails and also show how you might find it useful. The proposal document has a few code examples, as usual.

Authored by: Nicolas Bevacqua

Javascript Passing by Value vs. Reference Explained in Plain English

Coming from Ruby when I first dove into Javascript the idea of passing by reference versus value threw me for a loop. When googling around I wasn't able to find any material that I felt explained it as simply as the concept really is.

Authored by: codeburst.io

Master Map & Filter, Javascript's Most Powerful Array Functions

This article is for those who have written a for loop before, but don't quite understand how Array.map or Array.filter work. You should also be able to write a basic function. By the end of this, you'll have a complete understanding of both functions, because you'll have seen how they're written.

Authored by: Arnav Aggarwal

Reverse Engineering One Line of JavaScript

Few months ago I received the following email from a friend of mine: Subject: Can you unroll and explain this 1 line of code to me? Body: Call me stupid but...I don't understand it and would love a detailed explanation. It's a ray tracer in 128 characters....

Authored by: Alex Kras


Angular.js

Angular Testing In Depth: Components

Learn how to test Components in Angular. We will start with writing isolated tests for a component and finish with integration tests for the rendered component.

Authored by: Soós Gábor

Angular: Best Practices

I published an article recently about things you should avoid doing when using Angular. Now it's the time to dive into stuff that you may rather consider doing in your Angular application.

Authored by: Родион Раскольников

Implement ngModelOptions with RxJS and Custom Form Control in Angular

If you've worked with AngularJS, you probably remember the ng-model-options directive. The two most useful options in this directive were the updateOn and the debounce options.

Authored by: Netanel Basal

Lazy loading: code splitting NgModules with Webpack

Let's talk about code splitting in Angular, lazy-loading and a sprinkle of Webpack. Code splitting allows us to essentially break our codebase down into smaller chunks and serve those chunks on demand, which we call "lazy loading".

Authored by: Todd Motto


React.js

Learn How To Build: Astronomy Picture Of The Day App with NASA API and React

Hey! I recently found out NASA has a public API. Cool! Let's build something today with the API! What are we going to build? Good question! We're going to build an app called astronomy picture of the day!

Authored by: Indrek Lasn

ReactJS - Component's basics

After have created our first app, now we need to understand what's happening inside our React application. I've made some changes to the application I created in the previous post, this is the new structure: I deleted some files that we are not going to need.

Authored by: codeburst.io

Extracting Logic from React Components

In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I'd recommend watching that video first, you don't need to have watched it to read this blog post.

Authored by: Jack Franklin

Combining React with Socket.io for real-time goodness

This post isn't heavy on React, so the core concepts should translate easily to other view frameworks like Vue and Angular. That said, for the rest of the post, I'll assume you are using React or React-Native. So you need to make your app respond to events from the server.

Authored by: Hendrik Swanepoel

How to Lazy Load features using React and Webpack

In the modern web, every kilobyte matters. We don’t want to load our app’s whole component library when user enters our site. We need to load components on demand, and after initial load, cache them in the memory for further use.

Authored by: Giorgi Bagdavadze

How to use React's Provider Pattern

The provider pattern in React is a powerful concept. You will not often see it when using plain React, but might consider using it when scaling your application in React. Basically it takes the clutter away of passing mandatory props, that are needed by every component, down your whole component tree.

Authored by: Robin Wieruch


Aurelia.js

Introducing Aurelia in Action

Aurelia in Action is a book targeted at teaching you what you need to build compelling, real-world applications in Aurelia from the ground up. The book centres around a fictional virtual bookshelf application (similar to Goodreads.com) called my-books.

Authored by: Aurelia

Get Root $index Value From Within Nested Aurelia Repeaters

Recently in an Aurelia project, I was working with nested repeaters (3 levels deep). The problem was I needed to get the $index from the top level repeater (so, level one).

Authored by: Dwayne Charrington

Getting My Hands Dirty with Aurelia's Binding Engine, Part Two

Last week, we looked at some hardcore Aurelia code written by Jeremy Danyow that helps create data-driven forms. This week, we'll check out how I used what I learned from Jeremy's code to answer a Stack Overflow question from my fellow Aurelia Core Team Member Matt Davis.

Authored by: Ashley Grant

Checking If a View Slot Is Defined In Aurelia

Aurelia supports the element provided via the HTML Web Components specification, which allows you to define placeholders in your HTML that can be replaced. A lot of examples around seem to wrap a slot with a DIV, perhaps a class.

Authored by: Dwayne Charrington


Vue.js

4 Important Changes In Vue.js 2.4.0

Vue.js 2.4.0 has been released this week with an abudance of new features, fixes and optimisations. In this article, I'll give you a breakdown of four new features that I think are the most interesting.

Authored by: Anthony Gore

Non-technical reasons why I like Vue

VueJS has been getting a fair amount of press recently. Most of it is from people who write frontend code for a living. I've instead spent most of my professional life working with backend & infrastructure code so I consider myself a new entrant to the JS world.

Authored by: codeburst.io

Guide to Vue.js for jQuery developers

Introduction to writing Vue.js components for developers with jQuery background. Today we're going to create a simple Vue.js component based on a jQuery dropdown button, in order to learn the most important differences between these technologies. As I wrote last week, Vue.js can be used not only to create large applications, but also for simple components.

Authored by: Michał Męciński

Creating a Data Table in Vue.js

Blogs, E-commerce sites, admins, and search results, almost everywhere you go online you are presented with large amounts of data and results, this transfer of information is a big part of what web applications are about.

Authored by: Gabriel Manricks

Building Native iOS and Android Apps With Vue and NativeScript

Vue is a popular JavaScript framework for handling the view layer of your application. NativeScript is technology that lets developers use JavaScript to drive completely native iOS and Android applications. Together the two technologies offer the hope of building native applications with the simplicity you expect from Vue, and the power you expect from NativeScript.

Authored by: TJ VanToll


Node.js

Security updates for all active release lines, July 2017

Updates are now available for all active Node.js release lines as well as the 7.x line. These include the fix for the high severity vulnerability identified in the initial announcement, one additional lower priority Node.js vulnerability in the 4.x release line, as well as some lower priority fixes for Node.js dependencies across the current release lines.

Authored by: node js

Node.js Security Release Summary

Recently, it was discovered that past versions of Node.js has several vulnerabilities that could leave your web application open to attack.

Authored by: bitandbang

Building a REST API using Mongo DB

In one of my previous posts, I wrote about how to build a simple CRUD application. CRUD stands for Create, Read, Update and Destroy. However, by building a REST API with a backend database like Mongo, it allows you to complete CRUD operations, without having to build a frontend environment.

Authored by: Ethan Jarrell

Using PostgreSQL with Azure And Node.js

Here is a video that covers all of the content in this post in case you're all like "I'm not reading all of this". Azure has released support for PostgresSQL and it's pretty rad. If you're all like, "what is Postgres and how do you say that word and why would I use it??", I'll let Rob Conery explain that for me.

Authored by: Burke H✪lland

Social Login for Your SPA: Authenticate Your Users via Google and Facebook

Increasingly, we are seeing web applications that are developed using a single page architecture, where the entire application is loaded into the browser as JavaScript and then all interactions with the server are carried out using HTTP based APIs that return JSON documents.

Authored by: Graham Cox

Building Electron Apps with Next.js

Next.js makes using React for building electron apps easy it has never been before.

Authored by: Leo Lamprecht


Libraries and Tools

Introducing npx: an npm package runner

Those of you upgrading npm to its latest version, , might notice that it installs a new binary alongside the usual npm: . npx is a tool intended to help round out the experience of using packages from the npm registry - the same way npm makes it super easy to install and manage dependencies hosted on the registry, npx makes it easy to use CLI tools and other executables hosted on the registry.

Authored by: ◯ちゃんかな〜 🤔

I Created Cell.js to Tackle the Root of All Evil: Dependency

What if we go all the way back to where it all started and think about it. What if we didn't have dependencies to begin with? This is why I built Cell.js, a self.driving app framework.

Authored by: ethan

Markvis - make visualization in markdown

make visualization in markdown

Authored by: GeekPlux


Testing

Mocking vs Refactoring

Sometimes code refactoring removes need for advanced mocking in tests. Recently I have published a repo with lots of examples of mocking Node system APIs in tests: node-mock-examples. One of the examples shows mocking system timers to "speed up" long test. This is coming from our production test that had a module emitting an event every minute.

Authored by: Gleb Bahmutov

Composable End-to-End tests for React Apps

On top of the Chrome export, Navalia also exports a "browser-balancer". This module can balance work across multiple browser instances, and even browser tabs internally, making for a much much faster test run. The API is just as straightforward as Chrome, and all of your test code largely remains the same.

Authored by: Joel Griffith

How to Write A Unit Test for Vue.js

Vue.js is a JavaScript framework which is useful for building the front-end of web applications, particularly when creating complex features. For every project, it's necessary to go through everything in our applications and check that it all works as expected.

Authored by: Scotch Development


Other

Musings on HTTP/2 and Bundling

HTTP/2 has been one of my areas of interest. In fact, I've written a few articles about it just in the last year. In one of those articles I made this unchecked assertion: If the user is on HTTP/2: You'll serve more and smaller assets.

Authored by: Jeremy Wagner

Javascript Decorator Pattern

When developing a large application, our main goal is not to repeat ourself and reuse our code. For code reuse we can do many things but one of them is inheritance.

Authored by: Mufti Faizan Haider

The MVC Design Pattern in Vanilla JavaScript

Design patterns often get incorporated into popular frameworks. The Model-View-Controller (MVC) design pattern, for example, is one that is ubiquitous. In JavaScript, it is hard to decouple the framework from the design pattern. Oftentimes, a particular framework will come with its own interpretation of this design pattern.

Authored by: SitePoint





0 comments