Angular vs. React is a popular debate among front-end JavaScript developers and, more often than not, the discussion ends up being biased towards one technology or the other. Developed by Google and Facebook respectively, Angular and React are the two popular technologies used to build interactive single-page applications.
A comprehensive comparison between Angular and React is imminent because there are certain places in which they significantly overlap in terms of what they offer, i.e. building the front-end view of your application and other places where their functionality remains incomplete unless helped by a third-party library. Adopting one technology over the other is a question of whether Angular or React better solves your problem and a bit of intuition. In this tutorial, we’ll compare and contrast seven key different features of Angular and React.
I am an ardent proponent of the code-first approach (code speaks louder than words, they say). Keeping this in mind, I’ve added code samples of Angular and React wherever possible so that you can build on your intuition and decide which works for you and which doesn’t. Let’s get started.
Angular is a framework, while React is a library.
So what does this mean? React on its own isn't adequate to create a web application because it is just designed to create views: the ‘V’ in MVC. React lets you build component-based views for which data can be passed down to child views. To address some of the other architectural needs, the React community has created key libraries like Redux and React Router, which supply architectural patterns that complement React.
Here's an illustration of the basic flow of the Redux architecture:
User interface events in the React components create actions, which update the central data store (model) of the app, which causes the components to re-render.
Most React apps will make use of these third-party libraries, and many more besides. Part of the challenge of starting out as a React developer is getting a handle on which third-party libraries are essential and learning these on top of React itself.
Angular, on the other hand, is more of a complete solution.
Angular is a framework for building client applications.
Angular was firmly built on top of the MVC pattern, which separates the application into three different layers. The first version of Angular made this architecture very clear, but the added complexity involved in mastering concepts such as directives, factories, and services to create a single-page application forced the developers at Google to shift towards a component-based architecture.
But when your application starts to grow, it’s important to have a solid structure that keeps the business logic of your application away from the components. Being a framework, Angular allows you to enforce structural organization by moving the business rules into a domain model (using a combination of model classes and services) and injecting the model into your components via dependency injection.
Here is a sample of code that illustrates how the business logic is encapsulated inside a User model and a User service, and away from our component.
/* Path: /app/models/User.ts */ export class User { id: number; username: string; password: string; firstName: string; lastName: string; }
/* /app/services/user.service.ts */ import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import { User } from '../models/User'; @Injectable() export class UserService { constructor(private http : Http) { } getAll() { // API to return all users } create(user: User) { //API call to create user } update(user: User) { //API call to update user } delete(id: number) { //API call to delete user } }
/* Path: /app/page/page.component.ts */ import { Component } from '@angular/core'; import { User } from '../models/User'; import { UserService } from '../services/user.service'; @Component({ templateUrl: 'page.component.html' }) export class PageComponent { currentUser: User; users: User[] = []; constructor(private userService: UserService) { //Dependency is Injected inside the constructor's arguments deleteUser(id: number) { this.userService.delete(id).subscribe(() => { #Do Something}); } private loadAllUsers() { this.userService.getAll().subscribe(users => { #Do something else }); } }
<!---Path: /app/home/page.component.html --> <div class="title"> <h2>All users:</h2> <ul> <li *ngFor="let user of users"> {{user.username}} ({{user.firstName}} {{user.lastName}}) - <a (click)="deleteUser(user.id)">Delete</a> </li> </ul> </div>
Both Angular and React are built around the idea of a component.
Components are the most basic building block of a UI in an Angular application. An Angular application is a tree of Angular components.
What are components? In Angular, components are TypeScript classes that have a @Component
decorator marked over them. Moreover, inside these decorators, we can define what Angular calls the meta-data, which includes the template, styles, selectors and so forth.
Component hierarchy in Angular is designed in such a way that you can associate structure and functionality under a single entity. Here is a high-level architectural overview of components and how this links to everything else in Angular.
Data sharing among components is possible by nesting components, as exemplified below.
/* UserParentComponent.ts */ import { Component } from '@angular/core'; // The <user-child> selector is nested inside <user-parent>. Each user is passed down as a property. @Component({ selector: 'user-parent', template: ` <h2>There are {{users.length}} registered users {{status}} now</h2> <user-child *ngFor="let user of users" [user]="user" [status]="status"> </user-child> ` }) export class UserParentComponent { users: { id: number, name: string }[] = [ { "id": 0, "name": "Chris" }, { "id": 1, "name": "Dwayne" }, { "id": 2, "name": "Eve" } ]; status: string = "online"; }
/* UserChildComponent.ts */ import { Component, Input } from '@angular/core'; // Input properties are adorned with @decorators // user & status are input properties @Component({ selector: 'user-child', template: ` <h2>{{user.name}}</h3> <p> id : {{user.id}} </p> <p> Status: {{status}} </p> ` }) export class UserChildComponent { @Input() user: { id: number, name: string }; @Input() status: string; }
The concept of components is deeply rooted in React, just as it is in Angular. Facebook calls React "a component-based library that lets you build interactive user interfaces". However, unlike Angular, React components are just JavaScript functions with an arbitrary number of inputs and an output. The code below shows a component defined using a JavaScript function and using an ES6 class.
// Writing components using JavaScript functions function Welcome(props) { return <h1>Hello, {props.name}</h1>; } // Writing components using ES6 Class class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
Each React component accepts an arbitrary number of inputs, which are stored inside an object named props
.
It also has a render
method, and as the name suggests, this method determines what will be rendered when the component is invoked. Each component maintains an internal state (via this.state
), and every time the state changes, the render function of that component is invoked again.
Angular applications are written in TypeScript, which is a superset of ECMA2015 and uses a transpiler to compile your strongly typed .ts file to a plain .js file. TypeScript offers language extensions that are designed to make writing in JavaScript easier, and it associates type information with JavaScript entities to enforce type checking and enhance the development workflow.
Some of the key features of TypeScript include optional static typing and support for interfaces, classes, and decorators. (Decorators are functions that are prefixed with @
and immediately followed by a class, parameter, or property.)
React also extends vanilla JS with some new language features. Let's dive into React, shall we? One of the most important language features in React is evident in this code sample.
function Tweet(props) { return( <div className="tweet"> <img src="https://twitter.com/some-avatar.png" className="tweet__avatar" /> <div className="tweet__body"> <p>This is a tweet.</p> </div> </div> ); }
Isn't this great? React lets you embed XML/HTML tags into your JavaScript file, and this is done through JSX, which offers syntax extension capability to JavaScript. Of course, this also means we have to use a transcompiler like Babel, which compiles our JSX code into the JavaScript that browsers can understand. The above code compiles down to this:
"use strict"; function Tweet(props) { return React.createElement( "div", { className: "tweet" }, React.createElement("img", { src: "http://twitter.com/some-avatar.png", className: "tweet__avatar" }), React.createElement( "div", { className: "tweet__body" }, React.createElement( "p", null, "This is a tweet." ) ) ); }
Although using JSX is recommended, you can stick with the much more verbose vanilla JavaScript React.createElement()
syntax if you are against the idea of embedding HTML tags into JavaScript.
Static type checking is performed at compile time. The compiler warns you about potential type mismatches and detects certain errors that would otherwise go unnoticed. Additionally, defining a contract on a variable, a property, or the parameters of a function can result in more readable and maintainable code.
Variable and function declarations are made more expressive by declaring their data types. You can read more about the different primitive data types in the TypeScript documentation.
let isLoggedIn: boolean = false; let id: number = 10; let name: string = "Davis"; let list: number[] = [1, 2, 3]; enum Color {Red, Green, Blue}; let c: Color = Color.Red; let bucket: any = 4; bucket = "I can be a string"; bucket = false; // or a boolean
Defining the signature of an API using an interface makes the code less ambiguous and easier to comprehend. The interface serves as a quick start guide that helps you get started with code immediately and saves time otherwise spent on reading the documentation or the actual implementation of the library.
interface ButtonSettings { text: string; size?: { width: number; height: number; }; color?: string; } function createButton(settings: ButtonSettings) { ... } createButton({ text: 'Submit' }); // OK createButton({ text: 'Submit', size: { width: 70, height: 30 }}); // OK createButton({ text: 'Submit', color: 43); // Not OK: 43 isn't a string createButton({ text: 'Submit', size: { width: 70 }); // Not OK: size needs a height as well createButton({ color: 'Blue'}); // Not OK: 'text' member is required
The type
keyword in TypeScript can be used to create an alias for a type. You can then create new types which are a union or intersection of these primitive types.
//Union Types type Age = number | string; function getAge (age: Age): string { return `You are ${age}!`; } let ofSusan: Age =21; let ofTyler: Age = 'thirty one'; getAge(ofSusan); // You are 21! getAge(ofTyler); // You are thirty one! //Intersection Types interface Name{ name(firstName: string, lastName: string): string; } interface Age { age(current: number): number; } // assign intersection definition to alias User type User = Name & Age; function createUser (testUser: User) { testUser.name("David","John"); testUser.age(99); testUser.address(); //error
React has limited support for type checking because the underlying ES6 doesn’t support it. Nevertheless, you can implement type checking using the prop-types
library developed by the React team. Type checking the props
of a component to check whether it is a string can be done as shown below.
import PropTypes from 'prop-types'; //importing prop-types library class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> <P> My age is, {this.props.age} </h2> ); } } Greeting.propTypes = { name: PropTypes.string; age: PropTypes.number; };
But prop-types
are not limited to strings, numbers, and booleans. You can do a lot more, as described in the prop-types documentation. However, if you take static type checking seriously, you should use something like Flow, which is a static type-checker library for JavaScript.
Starting a project from the ground up might seem fun initially. However, the process of setting up the directory structure, writing boilerplate code for components, and getting the application bootstrapped is a time-consuming and unproductive exercise when you're on a schedule. Your strategy should be to get on with your app as quickly as possible and focus on the actual development. Thanks to Google and Facebook, you have tools available to create and scaffold your applications with ease.
Setting up Angular-CLI for Angular and create-react-app for React is straightforward using npm.
// Angular CLI $ npm install -g @angular/cli // create-react-app $ npm install -g create-react-app
To create a new Angular application, you should use the following command:
$ ng new PROJECT-NAME $ ng serve
But that's not it. The ng generate
command lets you generate components, routes, pipes, directives, and services.
$ ng generate component Page installing component create src\app\page\page.component.css create src\app\page\page.component.html create src\app\page\page.component.spec.ts create src\app\page\page.component.ts update src\app\app.module.ts
Angular CLI can do a lot more, like creating a build of your Angular app, commands for running unit tests, and end-to-end testing. You can read more about it on GitHub.
On the other hand, create-react-app
is the officially supported way of creating a React app without any configuration files.
$ npm install -g create-react-app
This should create a functional React app with all the Babel and Webpack dependencies taken care of. You can start running the app on your browser using npm start
.
You can find the scripts available for the React app in the package.json file.
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }
Data binding is a feature that enables synchronization of data between the application state (model) and the view. In a one-way data binding routine, any change in the state of the application automatically updates the view. On the contrary, two-way data binding binds together properties and events under a single entity: any modification of the model updates the view and vice versa.
In React, the properties are passed down from parent to child components, which is known as the unidirectional or top-down data flow. The state of a component is encapsulated and is not accessible to other components unless it is passed down to a child component as a prop: the state of a component becomes the prop of the child component.
class UserChild extends React.Component { render() { let userData = this.props.users.map( (user) => { return (<p> <strong>{user.id} </strong> : {user.name} </p>); }); return ( <div> <h2> Hello. The server is {this.props.status} </h2> {userData} </div> ); } } class UserParent extends React.Component { constructor() { super(); //State gets defined here this.state = { status: "Online" } } render() { return ( <div> <UserChild users={this.props.users} status={this.state.status} /> </div> ); } } var USERS = [ { "id": 0, "name": "Chris" }, { "id": 1, "name": "Dwayne" }, { "id": 2, "name": "Eve" } ]; ReactDOM.render( <UserParent users={USERS} />, document.getElementById('container') );
But what if you need to propagate the data up through the component tree? This is done through child events and parent callbacks. The React documentation includes a good example that deals with such a scenario.
Data binding techniques available in Angular are among the unique features that make it stand out. Angular has out-of-the-box support for interpolation, one-way binding, two-way binding, and event binding.
Interpolation is the simplest way to bind your component property in the text between your HTML tags and attribute assignments.
<p>Welcome back {{currentUser.name}}!</p>
Property binding is similar to interpolation in the sense that you can bind the properties of your view elements to component properties. Property binding favors component communication and is identical to how props are passed down in React.
<img [src]="userImgUrl">
<user-child [user]="currentUser"></user-child>
Event bindings allow data to flow in the opposite direction, i.e. from an element to a component. Here, click
is a target event, and on the right, we have the onSave()
method that gets invoked when the event occurs.
<button (click)="onSave()">Save</button>
But the most important feature is the two-way binding using [(ngModel)]
. This merges the property binding and event binding under one directive and is particularly useful with forms and input fields.
<div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div>
Server-side rendering is a traditional rendering technique. Here, the server returns the whole HTML file upon request, and the browser is left with the simple job of displaying it to the user. Client-side rendering, on the other hand, returns a bare-bones HTML document, the stylesheet, and a JavaScript file. The JavaScript makes subsequent requests to render the rest of the website using a browser. React, Angular and all other modern JavaScript front-end libraries are good examples of client-side rendering. This is evident if you view the source of your Angular/React application.
But client-side rendering has the drawbacks that it doesn’t work great for SEO and that it returns incomplete HTML content when you share your link on social media sites. Angular has a solution called Angular Universal that takes care of making your app search engine friendly and social media friendly. It’s a library built by the Angular team, and using it is definitely favored.
Universal makes use of a pre-rendering technique where the whole website is rendered from the server first, and after a couple of seconds, the user is switched to the client-side rendering. Since all this happens under the hood, the user doesn’t notice anything different.
If you are using React with Redux, the Redux documentation has a good tutorial on setting up server rendering. You can also set up React to render from the server using the BrowserRouter
and StaticRouter
components available in the react-router
library. You can read more about it in this Medium article. But if you are into performance and optimization, you can try next.js, which is a library for SSR in React.
Let's look at some of the general advantages and disadvantages of Angular and React:
React | Angular | Winner | |
---|---|---|---|
Mobile Apps | React Native provides native-like performance with a similar platform to React | Ionic is a WebView mobile app platform based on Angular | React |
App Speed | React is fast to render with virtual DOM technology | Angular has improved performance in recent years, but is still not as fast as React | React |
App Size | React itself is very small, but your app size will depend on the external libraries you add | Angular tends to produce heavier apps | React |
Server-Side Rendering | React supports server-side rendering—the Redux library makes this easier | Angular also supports server-side rendering with Angular Universal | tie |
Ease of Learning | Core React has a simple structure and syntax that can be quickly mastered | Angular has a steeper learning curve with many novel concepts and structures | React |
Project Setup | create-react-app makes project setup easy | Angular CLI makes it easy to bootstrap a project. | tie |
Structure and Architecture | React doesn't provide much guidance out of the box on how to architect a scalable and maintainable app—you'll have to research this yourself | Angular provides an opinionated architecture—you won't have to reinvent the wheel | Angular |
Routing | You'll need a third-party library for routing—but React Router is very popular and is de facto part of React | Angular comes with support for routing built in | tie |
HTML Templating | React has the JSX syntax for integrating HTML with JavaScript code—things like loops and conditional rendering are handled with regular JavaScript | Angular uses HTML templates with special directives for tasks like loops and conditional rendering | tie |
Dependency Injection | React doesn't support dependency injection by default | Angular uses dependency injection from the ground up, making it easier to architect your app | Angular |
Data Binding | React's one-way data binding can be tricky to use at first | Angular's two-way data binding makes it easy to wire your data and components together | Angular |
The development process is good with both React and Angular. Both technologies are powerful, and picking the ideal one comes down to personal preference. However, you must make decisions depending on your needs for functionality and usability, as well as the necessity to expedite development. The above pros and cons of each framework or library will help you in making a better decision.
Comparing a full-blown, feature-rich framework to a robust UI library might not seem fair. However, they are advanced JavaScript technologies used to create interactive single-page applications, and in that regard, this article should help you decide on choosing one of them.
What are your thoughts on Angular vs. React? Do share them on the forum.
The Best Small Business Web Designs by DesignRush
/Create Modern Vue Apps Using Create-Vue and Vite
/How to Fix the “There Has Been a Critical Error in Your Website” Error in WordPress
How To Fix The “There Has Been A Critical Error in Your Website” Error in WordPress
/How Long Does It Take to Learn JavaScript?
/The Best Way to Deep Copy an Object in JavaScript
/Adding and Removing Elements From Arrays in JavaScript
/Create a JavaScript AJAX Post Request: With and Without jQuery
/5 Real-Life Uses for the JavaScript reduce() Method
/How to Enable or Disable a Button With JavaScript: jQuery vs. Vanilla
/How to Enable or Disable a Button With JavaScript: jQuery vs Vanilla
/Confirm Yes or No With JavaScript
/How to Change the URL in JavaScript: Redirecting
/15+ Best WordPress Twitter Widgets
/27 Best Tab and Accordion Widget Plugins for WordPress (Free & Premium)
/21 Best Tab and Accordion Widget Plugins for WordPress (Free & Premium)
/30 HTML Best Practices for Beginners
/31 Best WordPress Calendar Plugins and Widgets (With 5 Free Plugins)
/25 Ridiculously Impressive HTML5 Canvas Experiments
/How to Implement Email Verification for New Members
/How to Create a Simple Web-Based Chat Application
/30 Popular WordPress User Interface Elements
/Top 18 Best Practices for Writing Super Readable Code
/Best Affiliate WooCommerce Plugins Compared
/18 Best WordPress Star Rating Plugins
/10+ Best WordPress Twitter Widgets
/20+ Best WordPress Booking and Reservation Plugins
/Working With Tables in React: Part Two
/Best CSS Animations and Effects on CodeCanyon
/30 CSS Best Practices for Beginners
/How to Create a Custom WordPress Plugin From Scratch
/10 Best Responsive HTML5 Sliders for Images and Text… and 3 Free Options
/16 Best Tab and Accordion Widget Plugins for WordPress
/18 Best WordPress Membership Plugins and 5 Free Plugins
/25 Best WooCommerce Plugins for Products, Pricing, Payments and More
/10 Best WordPress Twitter Widgets
1 /12 Best Contact Form PHP Scripts for 2020
/20 Popular WordPress User Interface Elements
/10 Best WordPress Star Rating Plugins
/12 Best CSS Animations on CodeCanyon
/12 Best WordPress Booking and Reservation Plugins
/12 Elegant CSS Pricing Tables for Your Latest Web Project
/24 Best WordPress Form Plugins for 2020
/14 Best PHP Event Calendar and Booking Scripts
/Create a Blog for Each Category or Department in Your WooCommerce Store
/8 Best WordPress Booking and Reservation Plugins
/Best Exit Popups for WordPress Compared
/Best Exit Popups for WordPress Compared
/11 Best Tab & Accordion WordPress Widgets & Plugins
/12 Best Tab & Accordion WordPress Widgets & Plugins
1New Course: Practical React Fundamentals
/Preview Our New Course on Angular Material
/Build Your Own CAPTCHA and Contact Form in PHP
/Object-Oriented PHP With Classes and Objects
/Best Practices for ARIA Implementation
/Accessible Apps: Barriers to Access and Getting Started With Accessibility
/Dramatically Speed Up Your React Front-End App Using Lazy Loading
/15 Best Modern JavaScript Admin Templates for React, Angular, and Vue.js
/15 Best Modern JavaScript Admin Templates for React, Angular and Vue.js
/19 Best JavaScript Admin Templates for React, Angular, and Vue.js
/New Course: Build an App With JavaScript and the MEAN Stack
/Hands-on With ARIA: Accessibility Recipes for Web Apps
/10 Best WordPress Facebook Widgets
13 /Hands-on With ARIA: Accessibility for eCommerce
/New eBooks Available for Subscribers
/Hands-on With ARIA: Homepage Elements and Standard Navigation
/Site Accessibility: Getting Started With ARIA
/How Secure Are Your JavaScript Open-Source Dependencies?
/New Course: Secure Your WordPress Site With SSL
/Testing Components in React Using Jest and Enzyme
/Testing Components in React Using Jest: The Basics
/15 Best PHP Event Calendar and Booking Scripts
/Create Interactive Gradient Animations Using Granim.js
/How to Build Complex, Large-Scale Vue.js Apps With Vuex
1 /Examples of Dependency Injection in PHP With Symfony Components
/Set Up Routing in PHP Applications Using the Symfony Routing Component
1 /A Beginner’s Guide to Regular Expressions in JavaScript
/Introduction to Popmotion: Custom Animation Scrubber
/Introduction to Popmotion: Pointers and Physics
/New Course: Connect to a Database With Laravel’s Eloquent ORM
/How to Create a Custom Settings Panel in WooCommerce
/Building the DOM faster: speculative parsing, async, defer and preload
1 /20 Useful PHP Scripts Available on CodeCanyon
3 /How to Find and Fix Poor Page Load Times With Raygun
/Introduction to the Stimulus Framework
/Single-Page React Applications With the React-Router and React-Transition-Group Modules
12 Best Contact Form PHP Scripts
1 /Getting Started With the Mojs Animation Library: The ShapeSwirl and Stagger Modules
/Getting Started With the Mojs Animation Library: The Shape Module
/Getting Started With the Mojs Animation Library: The HTML Module
/Project Management Considerations for Your WordPress Project
/8 Things That Make Jest the Best React Testing Framework
/Creating an Image Editor Using CamanJS: Layers, Blend Modes, and Events
/New Short Course: Code a Front-End App With GraphQL and React
/Creating an Image Editor Using CamanJS: Applying Basic Filters
/Creating an Image Editor Using CamanJS: Creating Custom Filters and Blend Modes
/Modern Web Scraping With BeautifulSoup and Selenium
/Challenge: Create a To-Do List in React
1Deploy PHP Web Applications Using Laravel Forge
/Getting Started With the Mojs Animation Library: The Burst Module
/10 Things Men Can Do to Support Women in Tech
/A Gentle Introduction to Higher-Order Components in React: Best Practices
/Challenge: Build a React Component
/A Gentle Introduction to HOC in React: Learn by Example
/A Gentle Introduction to Higher-Order Components in React
/Creating Pretty Popup Messages Using SweetAlert2
/Creating Stylish and Responsive Progress Bars Using ProgressBar.js
/18 Best Contact Form PHP Scripts for 2022
/How to Make a Real-Time Sports Application Using Node.js
/Creating a Blogging App Using Angular & MongoDB: Delete Post
/Set Up an OAuth2 Server Using Passport in Laravel
/Creating a Blogging App Using Angular & MongoDB: Edit Post
/Creating a Blogging App Using Angular & MongoDB: Add Post
/Introduction to Mocking in Python
/Creating a Blogging App Using Angular & MongoDB: Show Post
/Creating a Blogging App Using Angular & MongoDB: Home
/Creating a Blogging App Using Angular & MongoDB: Login
/Creating Your First Angular App: Implement Routing
/Persisted WordPress Admin Notices: Part 4
/Creating Your First Angular App: Components, Part 2
/Persisted WordPress Admin Notices: Part 3
/Creating Your First Angular App: Components, Part 1
/How Laravel Broadcasting Works
/Persisted WordPress Admin Notices: Part 2
/Create Your First Angular App: Storing and Accessing Data
/Persisted WordPress Admin Notices: Part 1
/Error and Performance Monitoring for Web & Mobile Apps Using Raygun
/Using Luxon for Date and Time in JavaScript
7 /How to Create an Audio Oscillator With the Web Audio API
/How to Cache Using Redis in Django Applications
/20 Essential WordPress Utilities to Manage Your Site
/Introduction to API Calls With React and Axios
/Beginner’s Guide to Angular 4: HTTP
/Rapid Web Deployment for Laravel With GitHub, Linode, and RunCloud.io
/Beginners Guide to Angular 4: Routing
/Beginner’s Guide to Angular 4: Services
/Beginner’s Guide to Angular 4: Components
/Creating a Drop-Down Menu for Mobile Pages
/Introduction to Forms in Angular 4: Writing Custom Form Validators
/10 Best WordPress Booking & Reservation Plugins
/Getting Started With Redux: Connecting Redux With React
/Getting Started With Redux: Learn by Example
/Getting Started With Redux: Why Redux?
/How to Auto Update WordPress Salts
/How to Download Files in Python
/Eloquent Mutators and Accessors in Laravel
1 /10 Best HTML5 Sliders for Images and Text
/Site Authentication in Node.js: User Signup
/Creating a Task Manager App Using Ionic: Part 2
/Creating a Task Manager App Using Ionic: Part 1
/Introduction to Forms in Angular 4: Reactive Forms
/Introduction to Forms in Angular 4: Template-Driven Forms
/24 Essential WordPress Utilities to Manage Your Site
/25 Essential WordPress Utilities to Manage Your Site
/Get Rid of Bugs Quickly Using BugReplay
1 /Manipulating HTML5 Canvas Using Konva: Part 1, Getting Started
/10 Must-See Easy Digital Downloads Extensions for Your WordPress Site
/22 Best WordPress Booking and Reservation Plugins
/Understanding ExpressJS Routing
/15 Best WordPress Star Rating Plugins
/Creating Your First Angular App: Basics
/Inheritance and Extending Objects With JavaScript
/Introduction to the CSS Grid Layout With Examples
1Performant Animations Using KUTE.js: Part 5, Easing Functions and Attributes
Performant Animations Using KUTE.js: Part 4, Animating Text
/Performant Animations Using KUTE.js: Part 3, Animating SVG
/New Course: Code a Quiz App With Vue.js
/Performant Animations Using KUTE.js: Part 2, Animating CSS Properties
Performant Animations Using KUTE.js: Part 1, Getting Started
/10 Best Responsive HTML5 Sliders for Images and Text (Plus 3 Free Options)
/Single-Page Applications With ngRoute and ngAnimate in AngularJS
/Deferring Tasks in Laravel Using Queues
/Site Authentication in Node.js: User Signup and Login
/Working With Tables in React, Part Two
/Working With Tables in React, Part One
/How to Set Up a Scalable, E-Commerce-Ready WordPress Site Using ClusterCS
/New Course on WordPress Conditional Tags
/TypeScript for Beginners, Part 5: Generics
/Building With Vue.js 2 and Firebase
6 /Best Unique Bootstrap JavaScript Plugins
/Essential JavaScript Libraries and Frameworks You Should Know About
/Vue.js Crash Course: Create a Simple Blog Using Vue.js
/Build a React App With a Laravel RESTful Back End: Part 1, Laravel 5.5 API
/API Authentication With Node.js
/Beginner’s Guide to Angular: HTTP
/Beginner’s Guide to Angular: Routing
/Beginners Guide to Angular: Routing
/Beginner’s Guide to Angular: Services
/Beginner’s Guide to Angular: Components
/How to Create a Custom Authentication Guard in Laravel
/Learn Computer Science With JavaScript: Part 3, Loops
/Build Web Applications Using Node.js
/Learn Computer Science With JavaScript: Part 4, Functions
/Learn Computer Science With JavaScript: Part 2, Conditionals
/Create Interactive Charts Using Plotly.js, Part 5: Pie and Gauge Charts
/Create Interactive Charts Using Plotly.js, Part 4: Bubble and Dot Charts
Create Interactive Charts Using Plotly.js, Part 3: Bar Charts
/Awesome JavaScript Libraries and Frameworks You Should Know About
/Create Interactive Charts Using Plotly.js, Part 2: Line Charts
/Bulk Import a CSV File Into MongoDB Using Mongoose With Node.js
/Build a To-Do API With Node, Express, and MongoDB
/Getting Started With End-to-End Testing in Angular Using Protractor
/TypeScript for Beginners, Part 4: Classes
/Object-Oriented Programming With JavaScript
/10 Best Affiliate WooCommerce Plugins Compared
/Stateful vs. Stateless Functional Components in React
/Make Your JavaScript Code Robust With Flow
/Build a To-Do API With Node and Restify
/Testing Components in Angular Using Jasmine: Part 2, Services
/Testing Components in Angular Using Jasmine: Part 1
/Creating a Blogging App Using React, Part 6: Tags
/React Crash Course for Beginners, Part 3
/React Crash Course for Beginners, Part 2
/React Crash Course for Beginners, Part 1
/Set Up a React Environment, Part 4
1 /Set Up a React Environment, Part 3
/New Course: Get Started With Phoenix
/Set Up a React Environment, Part 2
/Set Up a React Environment, Part 1
/Command Line Basics and Useful Tricks With the Terminal
/How to Create a Real-Time Feed Using Phoenix and React
/Build a React App With a Laravel Back End: Part 2, React
/Build a React App With a Laravel RESTful Back End: Part 1, Laravel 9 API
/Creating a Blogging App Using React, Part 5: Profile Page
/Pagination in CodeIgniter: The Complete Guide
/JavaScript-Based Animations Using Anime.js, Part 4: Callbacks, Easings, and SVG
/JavaScript-Based Animations Using Anime.js, Part 3: Values, Timeline, and Playback
/Learn to Code With JavaScript: Part 1, The Basics
/10 Elegant CSS Pricing Tables for Your Latest Web Project
/Getting Started With the Flux Architecture in React
/Getting Started With Matter.js: The Composites and Composite Modules
Getting Started With Matter.js: The Engine and World Modules
/10 More Popular HTML5 Projects for You to Use and Study
/Understand the Basics of Laravel Middleware
/Iterating Fast With Django & Heroku
/Creating a Blogging App Using React, Part 4: Update & Delete Posts
/Creating a jQuery Plugin for Long Shadow Design
/How to Register & Use Laravel Service Providers
2 /Unit Testing in React: Shallow vs. Static Testing
/Creating a Blogging App Using React, Part 3: Add & Display Post
/Creating a Blogging App Using React, Part 2: User Sign-Up
20 /Creating a Blogging App Using React, Part 1: User Sign-In
/Creating a Grocery List Manager Using Angular, Part 2: Managing Items
/9 Elegant CSS Pricing Tables for Your Latest Web Project
/Dynamic Page Templates in WordPress, Part 3
/Angular vs. React: 7 Key Features Compared
/Creating a Grocery List Manager Using Angular, Part 1: Add & Display Items
New eBooks Available for Subscribers in June 2017
/Create Interactive Charts Using Plotly.js, Part 1: Getting Started
/The 5 Best IDEs for WordPress Development (And Why)
/33 Popular WordPress User Interface Elements
/New Course: How to Hack Your Own App
/How to Install Yii on Windows or a Mac
/What Is a JavaScript Operator?
/How to Register and Use Laravel Service Providers
/
waly Good blog post. I absolutely love this…