Learn Gulp, Polymer and Xstream

Polymer is a framework created at Google for building reusable web components.

We use HTML elements every day such as div, a, button, form, and table. All HTML elements provide some sort of API of attributes, properties, methods and events that we use to manipulate them. Generally, web elements are styled in a particular way by default, and also allow us to customize their styling with CSS.

Polymer allows you to build fully custom web elements of your own for more complex components composed of the building blocks you are used to with the standard set of HTML elements.

This course is an introduction to Polymer, and should get you started building your own customizable web elements that you can use on their own, or even with your favorite framework like Angular or React!

The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements.

polymer

Creating Custom Web Elements with Polymer 2

In this series we will take a look at Gulp. Gulp is a task runner. It is the commander of our army of helper robots that take critical, yet totally mundane, tasks and perform them hundreds of times per day so we don't have to. When we sit down to work, we want to enter a single command, and then spend the rest of our day writing code, testing, and basically not thinking about how it is all glued together in the background.

Automation is critical to any project of significant size. We will start with the Eggly Bookmarks application, and develop proper build automation that will include **production ready** tools that you can start using in your applications today!

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

Angular Automation with Gulp

In this lesson, we are going to learn how to create a config file to store common values so that we can reuse them multiple times in our `gulpfile.js`. As our `gulpfile.js` grows in complexity, we may find that we are introducing complex and multiple file path references. By creating a `gulp.config.js` file, we can simplify these references and make it easier to refactor and extend in the future. 

Angular Automation: Gulp Config

In this lesson, we are going to learn how to use `gulp.watch` to detect local file changes and execute additional Gulp tasks. To illustrate this concept, we are also going to hook up `gulp-jshint` to automation lint our JavaScript as we make changes to our code.

Angular Automation: Gulp Watch

In this lesson we'll look at creating event listeners in our custom element using the listeners object as well as annotated event listeners.

Create Event Listeners in Polymer Elements

Angular projects require automation. Period. 

In this series we will take a look at Gulp. Gulp is a task runner. It is the commander of our army of helper robots that take critical, yet totally mundane, tasks and perform them hundreds of times per day so we don't have to. When we sit down to work, we want to enter a single command, and then spend the rest of our day writing code, testing, and basically not thinking about how it is all glued together in the background.

Automation is critical to any project of significant size. We will start with the Eggly Bookmarks application, and develop proper build automation that will include **production ready** tools that you can start using in your applications today!

Angular Automation: Introduction to Gulp

In this lesson, we are going to learn how to copy assets from one place to another using Gulp. This is important as you start to prepare your source files to be deployed into production. We will learn how to implement `gulp.src`, `gulp.pipe` and `gulp.dest` as well as the **del** plugin as we copy our files from the source directory into a build directory.

Angular Automation: Copy Assets with Gulp

In this lesson, we are going to learn how to use the `gulp-inject` plugin to sanely and efficiently manage our file references with our HTML. Manually declaring JavaScript references will quickly get out of hand as your application grows in size and complexity. The `gulp-inject` plugin solves this problem by taking a stream of files, converting them into string references and then injecting those references into your HTML via annotations. 

Angular Automation: Gulp Inject

In this lesson, we are going to learn how to automatically serve our project via an HTTP server using `gulp-serve`. Being able to serve our project from an HTTP server allows us to bypass a myriad of development issues such as loading remote source files.

Angular Automation: Gulp Serve

In this lesson, we will learn how tasks work in Gulp. We will talk about how to define a task and what each parameter in the definition does. We will see how task dependencies work and talk about how to handle asynchronous issues using `run-sequence`.

Angular Automation: Gulp Tasks

In this lesson, we learn how to get up and running with Gulp by initializing our project with ```npm init``` and then installing the Gulp CLI globally and then installing it locally to our project. We finish the lesson off by creating our first Gulp file and running our first Gulp task.

Angular Automation: Installing Gulp Globally and Locally

Custom element property changes can be observed by specifying an observer method which will be executed whenever a change occurs and receive both the new value and old value.

Observe Property Changes on a Custom Polymer Element

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.

Separate Logic from Effects in Cycle.js

In this lesson we'll look at the lifecycle callbacks (Created, Ready, Attached, Detached, and attributeChanged) available to us in Polymer and how to use each one.

Use Lifecycle Callbacks On Custom Polymer Elements

Polymer provides us a variety of data-binding configurations.  In this lesson we'll look at configuring Two-way, One-way-down and One-way-up data binding.

Data Bind Two Polymer Elements

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

browserify

Building upon the `watch` task that we begin this lesson with, we’ll look at how to create a local development server using the `app` directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public `.stream()` method that is designed exactly for this purpose.

Gulp and Browserify - Adding Live Reload with Browsersync

We can utilize the "fire" method from within our custom element to execute a custom event.  In this lesson we'll create a custom event and pass useful data along with the event to the consumer of our element.

Execute Custom Events in Polymer

In this lesson we'll use the "dom-repeat" helper method in our custom element to iterate over a collection and use the built in model instantiation to update items in our collection.

Iterate over a Collection with Polymer's dom-repeate

In this lesson we'll install Polymer using bower and explore creating our first custom element. We will use the dom-module to create our first Element and add an event listener to watch for the `keyup` event.

Create a Custom Element using Polymer

In this lesson we'll look at how to isolate the style of our custom element, use the ":host" selector, and create css variables in order to theme our element.

Style Custom Elements in Polymer

Polymer allows us to extend a native HTML element's UI or functionality.  In this lesson we'll use a button as our custom element basis and add new UI and functionality to it that can be added to any button in our application.

Topics

Instructors

Content Type