Learn Angularfire and Babel

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

We can write our package using the latest JavaScript syntax with a compilation step. In this lesson we will install `babel-cli` and `babel-preset-latest` and wire up a `build` script to compile our code using the babel “latest” preset when source files change. This means those using our package can use it in any version of JavaScript even though we are using the latest syntax for our source code.

Set up compilation of source code using babel with npm scripts

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using `exorcist`.

Gulp and Browserify - Adding Babel & Source Maps

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

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

Babel is a compiler that lets us right future JavaScript not yet fully in browsers (ES6 / ES2015, ES7 / ES2016, etc) and transpile it back into code that can be used now. We'll walk through installing babel, writing some future JS syntax, transpiling it, and running it in a browser.

**This lesson is out of date and uses an older version of Babel.**

Writing next generation JavaScript with Babel 5 (out of date)

In this lesson, we’ll install Babel and use it from the terminal to see how it can take JavaScript that uses modern language features and output JavaScript that will run in down-level browsers.

Transform Modern JavaScript Features with Babel

In this lesson, we'll configure webpack to use the Babel loader for our JavaScript files, allowing us to transpile our source files and generate a bundle for deploying our application.

Configure webpack to Load JavaScript Files through Babel with babel-loader

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

In this lesson, we'll add React and ReactDOM to our project and create an entry point for the React application. We'll also configure Babel with the React preset so Babel can transpile our JSX into JavaScript that will run in a browser.

Configure babel for React with preset-react

We transpile our JavaScript code so we can use modern language features, even if browser support isn't quite where we need it to be. This includes proposed features that aren't yet part of the official language specification. In this lesson, we'll see how we can support the proposed class property syntax for JavaScript with a Babel plugin.

Support Proposed JavaScript Features with Babel Plugins

Converting all of our modern JavaScript into ES5 compatible syntax is a great way to use modern features while targeting older browsers. What happens when the browsers natively support these language features? Then it no longer makes sense to transform that code or to include polyfills that will go unused. In this lesson, we’ll add the `@babel/polyfill` package and configure `babel-preset-env`

Target specific browsers with babel-preset-env and the babel pollyfill

One approach to building high performance applications with `webpack` is to take advantage of code-splitting to only load the needed JavaScript on initial load and asynchronously load additional JavaScript bundles when needed. In this lesson, we'll create add some code-splitting to our placeholder application and configure our project to support the dynamic `import()` syntax.

Asynchronously Load webpack Bundles through Code-splitting and React Suspense

We take the opengraph image we wrote in codesandbox and copy it into our serverless function. We use Rollup to compile the component into an IIFE (immediately invoked function expression) that can run in our headless browser environment and cover a wide set of rollup plugins that we need for compatibility. We end the lesson having successfully screenshot our opengraph react component from our Netlify Function

**Note**:  Due to Netlify changing their handling, the path in `fs.readFileSync` is affected. Update to:
```js
const script = fs.readFileSync(path.resolve(__dirname, "image.js"), "utf-8");
```

Compiling a React to an IIFE with Rollup to execute and render in a headless browser

AngularFire is the officially supported AngularJS binding for Firebase. Firebase is a backend service that provides data storage, file storage, authentication, and static website hosting for your Angular app.

angularfire

You'll learn the 2 Observables that Firebase Authentication provides to subscribe to the authentication state of your application, `authState` and `user`.

You'll see how they both return the same `User` object from Firebase Authentication.

And you'll learn that the difference is that `authState` triggers when the user logs in, or logs out of the application, while `user` is called both of those times, and also is called when Firebase refreshes the user's authentication token.

As a personal guideline, if I need to do an operation when the user's token is refreshed (_for example, update a 3rd party service_) I'll use `user`, if not, I'll default to `authState`.

Choose Between authState or user to Subscribe to Firebase Authentication State Changes

firebase

There are 2 different ways to get a document's ID when using `@angular/fire`.

You can add the parameter `{ idField: 'id' }` to your collection when using the `collectionData()` observable.

You can also use the observable `collectionChanges()` and access the internal metadata of the document to manually get the ID and add it to the resulting object.

Code sample: https://github.com/javebratt/angularfire-idField

Access a Firebase Document's ID Even when It's Not Stored in the Document with angularfire

<p>Henry Zhu is currently a steward for Babel, and today he'll be discussing the management and lifestyle side of working on an open source project full-time.</p><p>The financial side to open source is interesting. Henry talks about where he gets his money and how he can be financially independent while still working on open source full time. Most of the money comes from donations through Open Collective and Patreon. A lot of the donations come from users, but corporations do donate as well. Henry also discusses the stability of it, and how the NPR model of asking for donations can lead to uncertainty about the next month.</p><p>Henry says he's enjoying the management and marketing side of being a steward about as much as he enjoys coding. It's a side that people don't often think about with open source. This side of it includes a lot of marketing and interacting with the greater community, as well as the other maintainers and contributors to babel.</p><p>How does Henry handle all this responsibility when there is no one above him telling him when to take a break, or when to go on vacation? Henry and Joel talk about having a positive "selfishness", and taking care of yourself so that the project can prosper. If you want to be doing it for years you have to make sure that you don't burn out.</p><hr /><h3>Transcript</h3><p><a href="https://egghead.simplecast.com/episodes/henry-zhu/transcript">"Henry Zhu, Maintainer of Babel" Transcript</a></p><h3>Resources:</h3><ul><li><a href="https://babeljs.io/">Babel</a></li><li><a href="https://www.amazon.com/Power-Habit-What-Life-Business/dp/081298160X">The Power of Habit</a></li><li><a href="https://www.amazon.com/You-Are-What-Love-Spiritual/dp/158743380X">You Are What You Love</a></li><li><a href="https://www.tinyhabits.com/">Tiny Habits</a></li><li><a href="https://kaidavis.com/articles/">Kai Davis</a></li></ul><h3>Henry Zhu:</h3><ul><li><a href="https://twitter.com/left_pad?lang=en">Twitter</a></li><li><a href="https://www.henryzoo.com/">Website</a></li><li><a href="https://github.com/hzoo">Github</a></li><li><a href="https://www.patreon.com/henryzhu">Patreon</a></li><li><a href="https://opencollective.com/babel#">Open Collective</a></li></ul><h3>Joel Hooks:</h3><ul><li><a href="https://twitter.com/jhooks">Twitter</a></li><li><a href="https://joelhooks.com/">Website</a></li></ul>


Today, Henry Zhu, the lead maintainer of Babel, discusses what it's like to work on a large and important open source project. Henry gets into how Babel receives funding, how corporations are involved in open source, stewardship of an open source project, mental and physical health, and not compromising his values.  

Search

Search Results