Learn Flux, Sequelize and Tweenmax

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

TimelineLite is a piece of the Greensock TweenMax library that provides the ability to create sequenced animation with very little code or setup.

Greensock TimelineLite Animation Sequences

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Actions contain no functionality, but rather describe an event in our application.  In this lesson we will describe our Actions as they relate to our application.  These Actions will then be available for triggering in our Views and for execution in our Store.

React Flux: Actions

In Flux our Components are referred to as Views, but they are the same familiar Components associated with any React development.  In Flux, however, we have the benefit of the architecture to keep us from having to pass down through a long chain of children Components any functionality that may be embedded in our Stores.  In this Lesson we will wire up all of our Components in record time utilizing the architecture we've already established.

React Flux: Components/Views

Stores are where the real work in our application is done.  Dispatchers broadcast Actions to all Stores, and the Stores registered to listen for those Actions will perform any logic needed to update our Views.  In this lesson we will establish our first Store and register the Actions we wish to respond to.

React Flux: Stores

Our build process during this series will utilize both gulp and browserify.  In this lesson we will take a moment to setup our environment and all of the tooling required to begin developing our Flux Application.  We've kept the build process very simple so porting it to grunt should be a breeze, but this also serves as a simple primer for those who may not be familiar with gulp.

React Flux: Development Environment Setup

Organizing modules and components is a critical aspect of the development of any single-page web application (SPA). In this lesson we will look at refactoring the Flux React store into a more module structure.

React Flux: Project Organization

Flux has four major components: Stores, Dispatchers, Views, and Actions.  These components interact less like a typical MVC and more like an Event Bus.  In this lesson we will start by creating our Dispatcher which queues up our Actions as Promises and executes them as they are received.  We'll also create an AppDispatcher which, unlike the Dispatcher, is more specific to our application.

React Flux: Overview and Dispatchers

As your React Flux application grows, it is inevitable that you start to see functionality and code repeated. With React, you can easily keep things DRY by using mixins.

React Flux: Remove Duplicate Code with Mixins

With this lesson, we will bring it all together, using what we've learned in the series to fisnish out the React Flux architecture example.

The completed code for this series can be found [here on Github](https://github.com/eggheadio/egghead-react-flux-example).

React Flux: Wrapping Up

By default, React doesn't have built in routing. We will add routing to our application with the react-routing-component.

React Flux: Routing with react-router-component

[Greensock](http://www.greensock.com/tweenmax/) is a powerful animation library for JavaScript. It's also fully compatible with AngularJS. This lesson will get you started using Greensock with AngularJS to provide rich animations for your users.

Basic Animation with Greensock's TweenMax

React's use of the VirtualDOM can make it confusing on how to get actual elements to use in animation libraries like TweenMax. This video shows how to use this.getDOMNode() and this.refs and hook them in to TweenMax to satisfy all of your advanced animation needs.

Using TweenMax with React

Sequelize is a promise-based ORM for Node.js and io.js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite and MSSQL and features solid transaction support, relations, read replication and more.

sequelize

Sequelize attribute getters and setters are a convenient way to encapsulate extra logic for model properties. In this video, we'll cover adding getters and setters to enhance and even virtualize a column.

Sequelize: Getters, Setters and Virtual Columns

Models in the Node.js ORM, Sequelize, can be expanded with both class level and instance level functions. This video will show you how to extend your models to add helpers or business logic, and explain the methods execution scope.

Sequelize: Class & Instance Methods

Javascript and database systems tend to be at odds with regard to how tables and columns should be named. Sequlize provides all the tools necessary to satisfy naming conventions in both your Node.js code and in your SQL database.

Topics

Instructors

Content Type