Learn Firebase, Grunt and Tweenlite

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

🔥 Firebase provides several easy-to-use authentication methods that we can use to handle auth in React apps. 

In this lesson, we will cover how to authenticate a user via an email and password. This is done using `createUserWithEmailAndPassword` function available to us from the `firebase` library. 

You'll need firebase configured in your application which you can [read about here.](https://dev.to/farazamiruddin/react-firebase-add-firebase-to-a-react-app-4nc9)

Authenticate a User in React with Firebase

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

Task automation is critical for any AngularJS single-page application. Grunt gets the job done.

Introduction to Grunt for Angular

The Firebase Forge provides a convenient GUI for visualizing and manipulating your data in real-time. Be sure to check out [this lesson](https://egghead.io/lessons/angularjs-get-started-with-firebase-and-angularfire) for getting Firebase setup.

Updating Real-Time Data with Firebase Forge

When using Firebase collections in your AngularJS application, you have access to a handy set of events emitted by the collection when changes in your data occur. Be sure to check out the [first lesson](https://egghead.io/lessons/angularjs-get-started-with-firebase-and-angularfire) in this series for the project source code.

Firebase Event Handling

AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application.

3d Animations with Greensock TweenLite

grunt

GruntJS allows you to use underscore/erb style templates to reduce repetition and create variables. This is commonly used to point at build folders and files within your application's structure.

Template

In this lesson John will show you how to start using Grunt Uglify to compress your javascript for production deployment.

Uglify

Grunt Multitask allows you to write complex tasks that run multiple targets. In this lesson, John will show you how to use Multitask in your GruntJS builds.

Multitask

You can use Grunt to combine all of your Javascript files into a single concatenated file.

Concatenating Your Javascript with grunt-contrib-concat

For production we want to use minified javascript to reduce the payload that is sent from the server. This can easily be accomplished with grunt-uglify.

Minifying your output with grunt-uglify

In this lesson John will show you how to get started with grunt-contrib-watch. Watch is an essential component of any Grunt build, and you will find yourself using it in almost every project. 

Grunt Watch

Firebase provides a real-time syncing backend for your AngularJS applications in very few lines of code. In this lesson, you'll learn how to get started integrating it into your app.

Get Started with Firebase and AngularFire

Data has relationships, and Firebase allows you to define those relationships in your AngularJS applications.

Firebase Data Relationships

Firebase has several ways to provide authentication for your AngularJS application. In this lesson, Lukas will look at the most basic email/password approach.

Firebase Basic Authentication Part 1

Grunt will clean up your build with the grunt-contrib-clean to make sure that no artifacts from previous builds are hanging around.

Cleaning your build folder with grunt-contrib-clean

With Grunt you can automate core tasks for your AngularJS project. In this lesson we will take a look at converting Stylus files to CSS, and add a watch task to convert those files automatically whenever a change is detected.

Development Automation Tasks with Grunt

React becomes incredibly powerful when coupled with a real-time backend like Firebase. See how easy it is to bring the two together and chat with Star Wars characters while you're at it.

React and Firebase with ReactFire

Build and watch ECMAscript 6 using traceur compiler and Grunt.

traceur compiler and Grunt

In this lesson John will show you how to create a simple external config file for your GruntJS build.

External Config

In this lesson you will install GruntJS and get up and running with your first task, initial configuration, and how to get Grunt methods auto-completing in WebStorm.

Introduction to Grunt

Authenticating with Firebase creates a 24 hour session for the user. This allows you to fetch the current session for the user, as well as logout the user and destroy the session.

Topics

Instructors

Content Type

Free or Pro