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…
Angular 2 has reached Beta and appears poised to become the hot new framework of 2016. It’s time for a showdown. Let’s see how it stacks up against 2015’s darling: React. Disclaimer: I enjoyed…
This tutorial does exactly what the 5 Minute Quickstart tutorial on the Angular 2 website does — building a “Hello World!” app. The only difference is that we’ll be doing this in ES6 Javascript while…
AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVW, MVVM, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!
In the last couple of years there has been an explosion in JavaScript frameworks. How is a developer or business to make a wise choice? What are the advantages, trade-offs and differences? In this talk we’ll compare and contrast six popular front-end frameworks: Angular 1, Angular 2, Polymer, React, Ember and Aurelia.
JavaScript modules are now supported in all major browsers! This article explains how to use JS modules, how to deploy them responsibly, and how the Chrome team is working to make modules even better in the future.
Legacy is a constant in JavaScript. Frameworks that were once the latest and greatest are now old and reviled. Backbone, AngularJS, JQuery, DOJO, YUI. Beautiful, extraordinary things with enormous…
I’ve seen many, many people using a modern framework like React, Angular or Vue.js blindly. These frameworks provide lots of interesting things, but usually people miss the point about the deepest…
Service workers are at the core of Progressive Web Apps. They allow caching of resources and push notifications, which are two of the main distinguishing features that have set native apps apart up…
Both React and Vue have gained a lot of attention and interest from the developer's community for the past 3 years. Although their technical nature is slightly different, they are often compared to each other due to a similar set of features making them compete in web development market. Read more
It has come time to read the liner notes and write some conclusions. When we started writing this blog series, we knew that JavaScript/web application frameworks were not easy to summarize.
A few days ago an article surfaced on Medium titled “Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)”. It finally made it to my circle of peers today, so I finally managed to…
At Rever (www.reverscore.com) we just released a new version of our web client using Vue.js. 641 commits and 16 weeks of intense development after with two resources, here we are, very proud of a…
In 2016 React cemented its position as king of the Javascript web frameworks. This year saw rapid growth of both its web and native mobile libraries, and a comfortable lead over main rival Angular…
Having a monolithic approach to a large front-end app becomes unwieldly. There needs to be a way of breaking it up into smaller modules that can act independently.
I work on a library called Polymer, which helps you write web components faster and easier. This is awesome, but it’s only awesome if you (yes, YOU) know what a web component is, and know that you want to write one. So here’s a story about what these things are and teaches you how to use them without showing you 10 pages of docs and getting you to install tools and CLIs. Maybe it’s for you. Maybe it isn’t. In either case, it has otters.
With all the new libraries and frameworks it is pretty hard to keep up with all of them, and that is if you can even decide which ones are worth spending time over.
Have you noticed my overly diplomatic title? It’s an attempt to frame this conversation in terms of what I prefer rather than what I believe to be objectively better in hope of diverting a flame war…
An opinionated comparison of react vs angular2. go through the blog to understand what fits you best. a critical overview of two popular front-end technologies.
Around the time I first published this I started assessing this myself. It is never an easy decision because there is so much to consider. Rob Eisenberg is a JavaScript framework expert. He is the…
In this post, we are going to look at just one aspect of the Microservice architecture: client-side integration. In particular, we will examine the pros and cons of thick vs thin client proxies. We will not focus on the web or external client technologies such as your web app’s JavaScript code or your mobile app’s code.
This post is a tutorial for writing a next-gen JavaScript Framework & solving problems regarding extendibility, dependency injection and private variables.
I have my own biases and preconceptions, but I want to state them openly and then make a sincere attempt to discuss other frameworks. I’m also trying to discuss these not with reference to myself but to a large degree as whether I recommend them to someone learning.