Building a Web Application with Polymer.js and Material Design

This course will introduce Polymer’s basic functionality by building together a real-life administration dashboard.
Course info
Rating
(101)
Level
Advanced
Updated
Dec 14, 2015
Duration
2h 6m
Table of contents
Description
Course info
Rating
(101)
Level
Advanced
Updated
Dec 14, 2015
Duration
2h 6m
Description

Web Components consist of a palette of revolutionary new HTML5 standards. These finally connect the critical missing parts needed in Web Development to build highly maintainable, modular, and distributable apps. Features of Web Components such as Templates aid us in writing truly re-usable code, while Custom Elements allow us to define our own HTML elements. With the Shadow DOM we can define encapsulated DOM branches in our elements and HTML Imports are a standard wrapping up and distributing of all the previous technologies. Although these may sound fantastic, we cannot use them as yet since they are not compatible with all of the browsers out there. Fortunately, various polyfills have been released to leverage older browsers to handle these standards and even combine them with other technologies. Polymer, backed-up by Google, is definitely the most popular. This course will introduce Polymer’s basic functionality by building together a real-life administration dashboard. Lastly, the UI framework of choice will be Material Design as it is tightly coupled with numerous pre-existing polymer elements.

About the author
About the author

Bill is a Microsoft MVP, Google Developer Expert, a Senior Software Engineer at Software Competitiveness International, and the creator of Dotnetweekly. He has over 7 years of experience in building Web Applications and is excited to learn and teach technologies as they develop/mature in the ever-changing world of the web.

More from the author
Single Page Applications with Vue.js
Intermediate
3h 11m
Oct 10, 2017
Getting Started with Progressive Web Apps
Intermediate
2h 12m
Nov 30, 2016
Working with Polymer.js Elements
Intermediate
1h 42m
Aug 16, 2016
More courses by Bill Stavroulakis
Section Introduction Transcripts
Section Introduction Transcripts

Introduction
Hi, this is Bill Stavroulakis and welcome to this course on Building a Web Application with Polymer. js and Material Design. We are hired. Let's imagine that an educational institution hired us to create a dashboard for their school. They want a simple authentication where they can log in, preview some data for their school, change the profile information, and view/edit their staff information. A simple chat is also necessary for them to chat with each other. They would like a fully responsive, single page, real time web application that can be extensible with any backend technology such as Node. js, C#, PHP, or Ruby, as they haven't decided yet. Time for us to create a simple, strong, extensible, and easy editable mockup to convince them that we are on the right track. We can select the wide range of front-end technologies such AngularJS, EmberJS, Backbone. JS and UI libraries such as Bootstrap. js, however, we will select Polymer. js and Material Design for the job and see where it will take us. By creating this application together, you will understand in action the fundamentals of web components, material design and the Polymer. js framework.

Working Example - Structure
Hi. This is Bill Stavroulakis and welcome to the second module of this course on building a web application with Polymer. js and Material Design. In this module we'll create the basic shell of our application. We'll begin setting up our environment and we'll create a simple drawer system. While implementing these sections, we'll go over together the basics of Polymer. js.

Working Example - Styling
In this module we'll talk about CSS and our elements. We'll also dress our site by creating a theme, colors, and seeing what is Material Design and how can we use its principles in our dashboard?

Routing
In this module we'll set up the routing structure of our dashboard. There should be a way where different links will load different pages dynamically, as this is a single page application. In this module we'll set up a small system to do exactly that.

Authentication
Hi. This is Bill Stavroulakis and welcome to the fifth module of this course on authentication in our web application. In this module we'll create a simple REST service, secure our application, and create a simple login system.

Profile
In this module we'll implement the profile page. In the profile page we'll first the user's data and offer the authenticated user the ability to update the ability to update this data. We'll also create a new dropdown element.

Staff List Page
Hi there. In this section, we'll create together the staff list page. This will be a grid with the staff information where we'll list the staff, create a new staff member, update the info of a staff member, delete an item, and search members by their username. Let us dive in.

Chat
This is the last module of this course concerning features of our application. We will list our friends on the right panel of the page and once we click on of our friends, we can chat with them. To make this possible we will see how we can add real-time functionality to our application and how can we create a simple chat system.

Performance and Optimization
In this module we'll talk about performance and optimization. Our application may look like it's done; however, there are some techniques left for us to improve its speed and make it smaller. Also, we'll have to add some tests for the durability, longevity and stability of our application.

Caveats and Resources
This is the last module of this course and we'll talk about why you may not want to use Polymer in your applications. We'll also go through the interesting differences between the Shady DOM and the Shadow DOM. Lastly, I'll list resources where you can continue your journey on Polymer and that you may find helpful to learn more on this subject.