![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
Despite all the fuss that's going on lately about React BSD+Patents License and its potential negative implications we had a ton of React.js articles this week. Maybe because of the above mentioned React license there are increasingly more articles with a focus on comparing React.js with other frameworks, especially Vue.js and Angular.
Besides the "big players frameworks" this week we have a good selection of articles on Aurelia as well as articles about general topics, tools, and libraries.
Finally, we have an announcement for a new version of Meteor!
General
Announcing Meteor 1.5.2
With over 40 pull requests under its belt, Meteor 1.5.2 is finally here! New features, routine dependency updates and a number of bug fixes (including a sneaky garbage collection bug in Node.js V8), all come together to make Meteor 1.5.2 a worthwhile update for any Meteor user! Let's get down to it.
Authored by: Meteor
Switching From React To Vue.js
So you're a React developer and you've decided to try out Vue.js. Welcome to the party! React and Vue are kind of like Coke and Pepsi, so much of what you can do in React you can also do in Vue. There are some important conceptual differences though, some of which reflect Angular's influence on Vue.
Authored by: Anthony Gore
Intersection Observer API
As developing for the web has matured and JavaScript engines have become faster, one area remains a significant bottleneck - rendering. It's because of this that so many of the recent development efforts have been focused around rendering, with virtual DOM being one of the more popular examples.
Authored by: Neil Roberts
ESLint test report in buddybuild
Let's examine the structure of the JSON produced by ESLint now. Here is a shortened example: ESLint goes straight to the essential: no metadata, just an array with an object representing each file. So let's try to transform the JSON in order to make buddybuild able to parse it.
Authored by: Nicolas Cuillery
Get to know the Actor Model
The Actor Model was proposed in the 70's by Carl Hewitt as a conceptual model to deal with concurrent computation. There are a good amount of implementations out there in the wild, from complete programming languages to libraries and frameworks; the most popular ones being Erlang/ Elixir and Akka.
Authored by: Roberto Dip
Thinking in JavaScript
Over the last week I've gradually come to the realization that the fundamental reason why most people have trouble with JavaScript is because it doesn't fit their mental model of how programming should be done. This isn't to say that most programmers don't manage to achieve their end goal.
Authored by: Dave Bush
JavaScript
JavaScript Data Types Explained
Two Kinds of Data In JavaScript there are two different kinds of data: primitives, and objects. A primitive is simply a data type that is not an object, and has no methods. In JS, there are six primitive data types: Boolean A boolean represents only one of two values: true, or false.
Authored by: Brandon Morelli
Part1: Introduction to this weird Language called Javascript!
This article is Part 1 for the Series "Modern ES6+ Javascript for those who know only a little about that old Javascript." Please note that this article assumes that you have little knowledge about...
Authored by: Harry Manchanda 🇮🇳
Iterables in Javascript
Learn what iterables are and how they are used in Javascript
Authored by: Tamás Sallai
HTML Templates via JavaScript Template Literals
You know those super cool backticks-for-strings in new JavaScript? let emotion = `happy`; let sentence = `Chris is feeling ${emotion}`; Besides the variable interpolation in there being mighty handy, the do multi-line strings wonderfully, making them great for chunks of HTML: const some_html = ` ${data.title} ${data.content} `; That doesn't look overly different than JSX does it?!
Authored by: Chris Coyier
JavaScript API - navigator.onLine
The navigator.onLine property provides a boolean value whether or not the user is connected to the internet. It's set to true if browser is online otherwise set to false. Browser also supports online...
Authored by: codeburst.io
TypeScript
Start Building Web Apps with KoaJS and TypeScript!
Since the early days of NodeJS, Express has been the de-facto standard web framework for NodeJS developers. However, JavaScript has come a long way in the last few years, and features like promises and async functions have made it possible to build smaller and much more robust web frameworks.
Authored by: Russell Briggs
Fixing Lodash TypeScript Errors By Upgrading @types/lodash In Node Or Webpack
Ben Nadel shares a set of TypeScript error messages that he was getting when attempting to create a proxy method around Lodash. The fix was to upgrade TypeScript and the Definitely Typed "@types/lodash" module.
Authored by: Ben Nadel
Getting started with TypeScript, WebPack, and React
Screencast and some code of just how easy it is to get started with TypeScript, WebPack, and React.
Authored by: Jonathan Creamer
Angular.js
Creating A Pipe That Can Consume Component Methods In Angular 4.4.0-RC.0
Ben Nadel demonstrates how to create a generic Pipe in Angular 4.4.0 that allow you to invoke a component method whenever the inputs to that method change. This reduces the number of times a template value has to be formatted by the component.
Authored by: Ben Nadel
Getting started with Angular and Redux
This article shows how you could setup Redux in an Angular application using ngrx. Redux provides a really great way of managing state in an Angular application. State Management is hard, and usually ends up a mess when you invent it yourself. At present, Angular provides no recommendations or solution for this.
Authored by: damienbod
Angular ServerSide Rendering with Koa
One of my favorite features of Angular is server-side render. With server-side rendering, the client is sent a full HTML page. One that can display without any attention network request. Greatly importing the preserved load times. https://github.com/HelixOne/koa-ssr To get started I used the angular-cli and ejected the webpack config.
Authored by: Lawrence I/O
Mix and Match: Angular + Custom Elements (Polymer)
In my previous post - Polymer 3.0 Preview - Building a mini card game, We use Polymer 3.0 Preview to create custom elements for our mini card game. Since Angular plays well with custom elements (as...
Authored by: Jecelyn Yeen
Encapsulating Firebase Using RxJS Streams In Angular 4.2.3
Ben Nadel looks at using RxJS streams as a means to encapsulate realtime events provided by the Firebase realtime database in an Angular 4.2.3 application. This accompanies a shift in thinking about the database abstraction layer as the driver of the data access API.
Authored by: Ben Nadel
React.js
Getting Started with React
React goes mobile with React Native In recent years, React (a JavaScript library built by some dope Facebook Engineers) has been the goto framework for cross platform development owing to its big selling point, React's great Developer Experience/User Experience. Described by its creators as "A JavaScript library for building user interfaces", React focuses on the view portion of your application.
Authored by: Bashir Kóredé
DOM Attributes in React 16
In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn't recognize, React would just skip it. For example, this: would render an empty div to the DOM with React 15: In React 16, we are making a change.
Authored by: React
Learning GitLab CI with Firebase + React: Part 2
Having roughed a shell for our automated test and deployment process, we now implement the details for our Firebase + React project. This article is part of a series, starting with Learning GitLab CI with Firebase + React: Part 1 , exploring GitLab's continuous integration feature.
Authored by: codeburst.io
Working with Data in React: Properties & State
Eric Greene of the Microsoft Developer Network teaches the fundamentals of working with data in React apps.
Authored by: SitePoint
Two simple ways to manage a busy RxJS stream
RxJS provides some expressive operators for delaying or deferring the output of streams -- particularly useful when dealing with chatty streams that may trigger some costly side-effect, such as rendering. Below are two patterns for throttling streams and examples for when each might be suitable.
Authored by: Football Radar Devs
Validating a React form upon submit
You now know about the differences between the controlled vs. uncontrolled form inputs. You have just made a couple of forms for your app when something stroke you: Users are going to enter bad data into the inputs... How do I handle that?
Authored by: Gosha Arinich
Aurelia.js
Web Components and Aurelia - The Shadow DOM
In this series we explore the Web Component APIs: HTML Imports, Custom elements, HTML Templates, and the Shadow DOM, seeing how each of these APIs can be used within the context of your Aurelia applications. In this installment, we'll look at the features Aurelia provides, including content projection, DOM encapsulation, and layouts.
Authored by: Sean Hunter
Aurelia and Web Components - HTML Templates and Custom Elements
In this series we explore the Web Component APIs: HTML Imports, Custom elements, HTML Templates, and the Shadow DOM, seeing how each of these APIs can be used within the context of your Aurelia applications. In this installment, we'll look at the features Aurelia provides around HTML templates and custom elements.
Authored by: Sean Hunter
Vue.js
Fastest way to publish a Vue.js component on NPM
Let's say you have just created a new Vue.js component and you want to share it to the world, how can you do it? Remember, to create a NPM project you just need to type npm init on the shell in your...
Authored by: Francesco Zuppichini
5 Vuex Plugins For Your Next VueJS Project
There are a lot of good reasons to use Vuex to manage the state of your Vue.js app. For one, it's really easy to add super-cool features with a Vuex plugin. Developers in the Vuex community have created a tonne of free plugins for you to use, with many of the features you can imagine, and some you may not have imagined.
Authored by: Anthony Gore
Build a Cryptocurrency Comparison Site With Vue.js
We show you how to create a simple web application using the Vue.js framework, by walking you through process of creating an app that compares cryptocurrencies.
Authored by: Randall Degges
Extending Vue.js Components
A web development expert walks us through one of the finer points of developing an application with the Vue.js framework, how to extend its components.
Authored by: Anthony Gore
Vue.Js Vs. Jquery: Use Cases and Comparison with Examples
What is Vue.js? How is it different from jQuery? Should I stop using jQuery if I learnt Vue.js? Can you use it outside Laravel? If you are a beginner or you just started learning Vue.js you are probably asking yourself the exact same questions or probably confused and wondering what does it do and what are its use cases.
Authored by: Rachid Laasri
Building a feature complete bookmarking app with Vue.js, Express and Sequelize ORM
Summary This tutorial walks through building a Node.js, MySQL and front-end framework (Vue.js) application. Client side code is bundled with webpack. Here is the github link for viewing the application source code: https://github.com/connor11528/sequelize-bookmarks Purpose The reason I am writing this is showcase how SQL, Node.js and modern client-side Javascript frameworks (Vue.js with Webpack) can all play nicely together.
Authored by: Connor Leech
Node.js
The 6 best new features in npm 5
Last night I attended waffle.js and heard a great talk by Laurie Voss, aka seldo, the CTO of npm, about new features in npm 5. Several things have been upgraded and new features have been added in npm 5, so, if you haven't upgraded yet, you're missing out.
Authored by: Estelle Weyl
5 Fantastic Features Shipping With Node.js 8 LTS
We get a new semver major LTS every year with Node.js - last year we got Node.js 6 that brought a suite of killer new features to an LTS release. You can expect this year to be no different, with Node.js 8 planned to go LTS on October 31st.
Authored by: bitandbang
Which of the Node.JS Frameworks to Choose and Why?
The creation of an app is a really complicated task. For a proper fulfillment of it you need lots of additional tools. That is why in that article you will see three most popular Node.JS frameworks.
Authored by: Artjoker
All about HTTP in node.js and 3 best ways for HTTP requests in web development
Another core module of Node.js! HTTP interface is similarly low-level when compared with frameworks or languages such as PHP in order to keep it fast and flexible.
Authored by: Meet Zaveri
Tips and Ticks with MustacheJS, MongoDB, NodeJS & Mlab.
This is a project I've been working on for some time, and uses several different technologies. 1 ) NodeJS - Back End 2) MustacheJS - Front End 3) Database - MongoDB & Mongo Compass & Robo3T 4) Deployment - Heroku & Mlab Here are some of the issues I ran into, and some considerations to keep in mind if you are planning a similar project, or deciding to use one of these technologies.
Authored by: Ethan Jarrell
Node.js Debugging
Proper logging is of massive utility for web apps, both during development and after deployment. What can sometimes be difficult is organizing both the code and output of logging, i.e. knowing where each log message is coming from. I recently found debug, a Node.js utility for organized and optimized debugging.
Authored by: David Walsh
Libraries and Tools
Getting Familiar with Gulp for Workflow Automation
I've been developing web applications for as long as I can remember and there are certain repetitive tasks that I do between the development and deployment of each final product. For example, current web standards demand that web resources like CSS, and JavaScript be minified or images be compressed.
Authored by: Nic Raboy
Building a Web App with AdonisJS
AdonisJS is a Node.js MVC framework. It offers a stable eco-system to write web servers so that you can focus on business needs over finalizing which package to choose or not. In this tutorial, I'll be showing you how to build a web app with AdonisJS.
Authored by: Chimezie Enyinnaya
Server-side rendering (SSR) in Meteor - Meteor Blog
This is a guest post from community member Julian Ćwirko, and was originally published on . Not only is the Meteor platform is still alive, it's constantly being improved! Meteor is becoming a more flexible and complete platform every day, despite proceeding at a slower pace than when the project was younger.
Authored by: Meteor
LookForward.js
A small library that helps you to create smooth transitions between pages without making too much efforts
Authored by: JavaScript Kicks
Reselect tutorial. Optimizing React Redux application development with Reselect.
React and Redux compliment each other well. React Components subscribe to Redux store due to which the child components re renders when the state (Redux state) is changed every time. So any component which is subscribed to Redux re renders when there is a state change (unless and until we mention not to do so).
Authored by: Codebrahma
7 benefits from using sequential.js
sequential.js is a new JavaScript code playground on GitHub. It's Instant Gratification. It's like using the Chrome DevTools Console, but without losing your work. You can play with any 'browserifiable' JavaScript library ( unpkg, wzrd.in, cdnjs, rawgit, jsdelivr, ...) You can share it in an hyper-link https://sequential.js.org/live.html#MYewdgziA2CmB00QHMAUBGA1OglAbiA You can embed it in your own site (like this).
Authored by: yolpos
Testing
Test Runners
Interesting ideas in JavaScript test runners. Even old things can be improved. Consider a wood axe. Simple, right? Humans have been chopping trees for thousands of years, yet there was undiscovered improvement. This guy has improved the axe to use all that angular momentum to chop wood easier and quicker.
Authored by: Gleb Bahmutov
Effortless React Component testing with jest
If you're not familiar with snapshot testing in a unit testing concept, it's not a very hard concept to grasp at all. You just... Run a piece of code that will produce the same output - given the same input. Record its' output somewhere - possibly check in into your source control.
Authored by: Nadeesha Cabral
Integrated Testing with React Native, Part 1: Generator Functions
Love it or hate, JavaScript is everywhere. Recently, I took another step toward assimilation by attending the Big Nerd Ranch Front-end Essentials bootcamp. And... all biases aside, IT WAS GREAT! I began the week with two goals: How to even modern CSS? React Native sounds cool, but how to test?
Authored by: Jonathan Martin
E2E Testing AngularJS applications with TestCafe
If you write with AngularJS then most likely testing with Protractor is the first thing that comes to your mind. But is it the only option? If you're curious about the alternatives, read ahead. In this tutorial, I'll show how to use TestCafe for testing AngularJS apps. TestCafe is a Node.js solution.
Authored by: Alexander Moskovkin
Writing Easily Testable Code with Stateless Components in React.js
The use of Stateless Functional Components (a.k.a. "pure" or "dumb" components) in React.js continues to grow since first it was released in React 0.14, and for good reasons. By relying on pure components, developers end up writing reusable code that's extremely easy to test, which leads to better application architecture.
Authored by: Thomas Greco
Functional Programming
JavaScript Monads Made Simple
"Dr. Hoenikker used to say that any scientist who couldn't explain to an eight-year-old what he was doing was a charlatan." ~ Kurt Vonnegut's novel Cat's Cradle If you go searching the internet for "monad" you're going to get bombarded by impenetrable category theory math and a bunch of people "helpfully" explaining monads in terms of burritos and space suits.
Authored by: Eric Elliott
Other
Learn How To Debug JavaScript with Chrome DevTools
As a new developer, finding and fixing bugs can be difficult. You may be tempted to randomly use console.log() in an attempt to get your code working correctly. Not Anymore! This article is all about debugging the correct way! You'll learn how to use the Chrome Developer Tools to set up breakpoints and step through your code.
Authored by: Brandon Morelli
Building a design system for HealthCare.gov
In a previous post we talked about how we're working with the Centers for Medicare & Medicaid Services (CMS) to create an open source design system for HealthCare.gov. In this post, I'd like to share some of the bigger technical decisions we made while building that design system.
Authored by: Sawyer Hollenshead
Test: Is GraphQL Right For You?
Although GraphQL is more powerful, REST is simpler and easier to operate. Take this quick test to see which architectural style you should use for your next project. You may have heard that REST is dead, and that GraphQL is the new norm for API centric architectures.
Authored by: François Zaninotto
React for Angular Developers
This article is for developers who are familiar with Angular 1.x and would like to learn more about React. We'll look at the different approaches they take to building rich web applications, the overlapping functionality and the gaps that React doesn't attempt to fill.
Authored by: Mark Brown ☕
A review of Server Side Rendering in Javascript frameworks
The Javascript ecosystem is always moving fast, so it's important to keep track of how everything is progressing, especially when it comes to tools and frameworks. The people at This.Dot produces an amazing series of webinars, called This.Javascript, that discuss the latest on major Javascript frameworks and tools.
Authored by: JavaScript Kicks
React vs Angular: An In-depth Comparison
This article is included in our anthology, Modern JavaScript. If you want everything in one place to get up to speed on modern JavaScript, sign up for SitePoint Premium and download all our JavaScript books and courses for just $5. Should I choose Angular, or React?
Authored by: SitePoint
