The MDN Web Docs Learning Area teaches fundamentals of modern web development, beginning with HTML, CSS, and JavaScript essentials. In feedback this year, readers asked for a more opinionated, structured ...
Let me start with this — this is by all means not a comparison of what should be your next choice for Front-End. It’s a small, relatively unsophisticated, comparison of three things: Performance, Size, and Lines of Code of pretty similar application.
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.
Reactive paradigm is a declarative way to manage changes in application status (versus traditional imperative programming), based on the concept of event streams.
There's been a lot of confusion, claims, and misinformation about Redux going around lately, and I want to help clear things up.Is Redux dead, dying, deprecated, or about to be replaced? No.
I’ve seen React misunderstood by smart people more often than any other JavaScript library. React is packed with ideas that were radical at the time of its introduction. This created an air of…
Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll…
With the growing popularity of JavaScript frameworks such as React, Angular, and Vue, testing your client-side code is becoming even more vital. When it comes to test frameworks, there are two major…
Vue is a very popular JavaScript front-end framework, one that’s experiencing a huge amount of growth. It is simple, tiny (~24KB), and very performant. It feels different from all the other…
React is incredible because it allows you to build your UI using a declarative API. You tell React what you want the interface to look like, and it handles the rest. As users interact with the…
JS Bin is a tool for experimenting with web languages. In particular HTML, CSS and JavaScript, but JS Bin also supports other languages too (like Markdown, Jade and Sass).
gpu.js is a single-file JavaScript library for GPGPU in the browser. gpu.js will automatically compile specially written JavaScript functions into shader language and run them on the GPU using the WebGL API. In the case where WebGL is not available, the functions will still run in regular JavaScript.
You may already be familiar with the basic features of the Chrome Developer Tools: the DOM inspector, styles panel, and JavaScript console. But there are a number of lesser-known features that can…
Lately, I've been working on a new library called purescript-sdom. It is an attempt to build a UI library in 100% PureScript without using the virtual DOM. I'll give an overview of the motivation behind the library, and the way in which it was implemented.
Once we were over the infamous Haskell learning-curve, we began looking for functional programming, immutability, and types everywhere! Given that one-third of our code runs in the browser (via Angular v1 — for now!), it is only a matter of time before we make the switch to typed-FP for front-end development as well.
We will be building a user authentication in a single page application with Node, React, Redux and Koa combined with Passport. We will implement local authentication, where users can log in using an email and passport, and authentication with Facebook, which can be used with other social networks and OAuth providers.
Build micro frontends that coexist and can each be written with their own framework. This allows you to: Use multiple frameworks on the same page without refreshing the page (React, AngularJS, Angular, Ember, or whatever you're using); Write code using a new framework, without rewriting your existing app; Lazy load code for improved initial load time.
Picking up new frameworks and libraries is exciting but also stressful. Even after some evaluation you never really know what skeletons you’re going to find out down the road. My honeymoon period is long over. After about 2 years of using Vue almost daily I can finally write about it with some perspective.
We have been using Vue instead of Angular for nearly a year now. In this article, I will highlight my impressions on Vue and differences compared to Angular.
This video covers the full installation of Vue and Vuex using the Vue-CLI and creating a project from scratch. This project will create a basic application that presents a problem that Vuex is uniquely qualified to fix. We'll use Vuex store to move information between two components that need to keep sync and are separated by both state and router and use Vuex to solve that problem.
I love Vue. When I first looked at it in 2016, perhaps I was coming from a perspective of JavaScript framework fatigue. I’d already had experience with Backbone, Angular, React, among others and I…
If I was going to sum up my experiences with Vue in a sentence, I’d probably say something like "it's just so reasonable" or "It gives me the tools I want when I want them, and never gets in my way". Again and again when learning Vue, I smiled to myself. It just made sense, elegantly. This is my own introductory take on Vue. It's the article I wish I had when I was first learning Vue. If you'd like a more non-partisan approach, please visit Vue's very well thought out and easy to follow Guide.
Riot lets you build user interfaces with custom tags using simple and enjoyable syntax. It uses a virtual DOM similar to React but faster. Riot is very tiny compared to industry standards. We think there is a clear need for another UI library.
Preact is a JavaScript library that describes itself as a fast 3kB alternative to React with the same ES6 API. As a frequent user of React, I’d always wanted to try out Preact and see what it offers…
In this article we will take an in-depth look at the differences and similarities between Marko and React from the perspective of the maintainers of Marko. Example • Similarities • Differences Syntax…
A UI library that allows you to break your application into components that are self-contained and describe how the application view changes over time and in response to user actions. Marko uses the HTML-JS syntax, rather than the JSX syntax offered for React.
Mithril positions itself as a compact but powerful modern client-side JavaScript framework. In this tutorial, we are going to use Mithril to build a fairly complex web interface to store data about conferences and authenticate it with Auth0.
Mithril is a marvelously tiny JavaScript library by Leo Horie. The functionality it provides works best when it is used as a complete framework. I found the fundamentals of Mithril’s rendering system to be a challenge to my basic assumptions about how a JavaScript application works. I think playing with real, running code is the best way to undertsand it.
Mithril.js is a small (7kb) and fast, classical MVC JavaScript framework. It encourages an architecture similar to Angular.js, and uses a virtual DOM like React.js, all while avoiding the need for libraries like jQuery. Mithril's small size and API makes it ideal for embedded JavaScript widgets and user interfaces that have high performance requirements.
Mithril is a modern client-side Javascript framework for building Single Page Applications. It's small (< 8kb gzip), fast and provides routing and XHR utilities out of the box.
React's future is going to be more functional, and less OOP. What if that future is already reality? How would it look like? React's foundations are reactive...
This lesson shows what can be learned next as a continuation of this course, and gives a recap on the core concepts: main for pure logic, drivers for side effects, run() to connect main and drivers, sources for read effects, sinks for write effects, and nesting Cycle.js apps to work as components.
Nick Johnstone on what makes Cycle special, the two-year long ‘weekend project’, great community engagement, and the future of programming. I came across Cycle while looking for a JavaScript…
Continuing on from my previous article Want to learn JavaScript in 2015 / 2016. I’m going to walk you through what else I’ve been up to in the world of Javascript. Initially I’d planned to talk about…
There’s one question that comes up again and again on stackoverflow. The question is about ngDoCheck lifecycle hook that is triggered for a component that implements OnPush change detection strategy…
As developers, we aim to use existing libraries in order to avoid reinventing the wheel. Unfortunately, Angular is still relatively young, and we cannot find an Angular component for everything we…
XSS is one of the attacks that can affect your website. In order to cope with the attack, Angular implements concepts that keep the developers from making mistakes and opens a window to a security…
How to communicate between components? This is the topic I saw many new Angular developers to struggle with. I will show you 3 most common approaches with examples that fits different use cases.
These are 3 situations that we can come across while building Angular apps using RxJs. We are going to go over why the issue happens and how to fix it.
When subscribing to observables it’s key to manage your subscriptions. An observable execution can run for an infinite amount of time and therefore we need a way to stop it from executing. If we keep…
This post is about an experimental approach and I am sure there are other approaches for solving a similar problem. If so, please comment on this article. Demo…
The ngrx team decided that we don’t need middleware anymore, in most cases, we can use meta-reducers to achieve the same effects. higher order function is a function that may receive a function as…
TL;DR: Curious about error handling? Scroll down to the final approach and/or check out the example project. Angular 2 is a great framework that provides nice tools to create awesome component-based…
This article will use the code which I previously wrote as a starting point. To see where we’re coming from, check my article, or check the full code in my repository. If you ever built a slightly…
Dan Wahlin will walk us through integrating Angular with RESTful services using RxJS and Observables. For those of you who don't know Dan - he is the founder...
Async programming is not easy but Reactive Programming can help. Using Observables, we will learn how to handle all forms of async data. From user input to A...
Reactive programming principles are continuing to spread across the web as developers look for ways to increase productivity and code quality. Learn about ho...
Web components are made up of 4 separate specs, custom elements, shadow DOM, HTML imports, and the template tag. For the purposes of this article we will focus specifically on custom elements.
Here we will be creating a simple Angular application with the help of Angular CLI, This will be the building block to more robust applications with Angular
In this article, we will cover the top common mistakes, and we will understand how to fix them. Each of those can be an idea to a full article. We will cover them briefly but in an exhaustive manner.
Angular (aka Angular 2, 4…) is a new framework completely rewritten from the ground up, replacing the now well-known AngularJS framework (aka Angular 1.x). More that just a framework, Angular should…