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.
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
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.