Learn Microsoft, Polymer and React-storybook

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

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 show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

Add React Storybook to a Project 

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Inspect Component Events with React Storybook

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

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



[React Storybook](https://github.com/kadirahq/react-storybook) is a UI component development environment for React.
With that, you can develop UI components without running your app.

Here I show how to get started with React Storybook.
For more information, have a look at our [documentation](https://getstorybook.io/docs).

Getting Started with React Storybook

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

Load React Storybook Stories Dynamically

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.

Extend Native HTML Elements with Polymer

We can declare properties on our custom element which serve as a public api configurable by any user from markup.

Understand Declared Property Basics in Polymer

Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data loaded from a service. In this lesson we will write our first React Storybook story.

Write the First React Storybook Story

React Storybook allows for easy snapshot testing integration with Facebook's Jest testing framework. Snapshot testing allows you to capture the state of your UI and then notify you when that UI has been altered. We can easily create and update snapshots with Storybook!





Jest Snapshot Testing with React Storybook

Microsoft Windows is a group of several graphical operating system families, all of which are developed, marketed, and sold by Microsoft. Each family caters to a certain sector of the computing industry.

microsoft

For a production Windows server it makes sense to run NodeJS applications as a Windows service.  This way they can be automatically restarted if the server is rebooted.

It also makes it easier to use monitoring tools like datadog to detect if there are issues with the service which is critical for production systems.

Install a Node.js Application as a Windows Service

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how to set up Storybook to display React components from scratch.

Set up Storybook for React from Scratch

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

To replicate your production application its helpful when developing a local NodeJS Express application is running under SSL. 

There are some web technologies which do not play nicely with standard http and its likely to become more common e.g. Web Push Notifications.

This lesson will show you how to create a local SSL certificate for localhost and then convert it into a format that will work with Express.  It will also show you how to make sure that Chrome will trust it.

This lesson is for Windows as it uses a powershell command, as well as the Microsoft Management Console (MMC)
 

Create Local SSL Certificates for an Express App on Windows

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

In this lesson we'll go through the process of setting up Storybook for Vue. We'll use Vue CLI to create a new Vue application and Storybook CLI to setup some initial stories and config. Storybook can help you develop UI components in an isolated area without running your full application.

*Additional Resources*
https://medium.com/storybookjs/introducing-storybook-for-vue-940f222541c5
https://storybook.js.org/basics/guide-vue/

Topics

Instructors

Content Type

Free or Pro