Polymer.js Demo of the Week | Week 1 | Component Declaration

This is the first week of the “Polymer.js Demo of the Week” series. Every week I’ll release a new Polymer.js demo for you to check out.

As a first demo I think it would made sense to just create simple component with Polymer.js.
Then we will declare a component with other frameworks so we can have a first scope of what is going on.

You can preview all of these demos at my mini-project site hellocomponent.com as well.

Lastly, all of the demos in the series can be previewed at the following site as well https://bstavroulakis.com/pluralsight/courses/polymer-js-getting-started/ and are part of my course “Getting Started with Polymer.js”

Polymer.js

In Polymer.js we have two declaration parts the imperative (script) and declarative (html).

    <dom-module id="hello-element">
      <template>Hello there</template>
    </dom-module>
    
    <script>
      HTMLImports.whenReady(function(){
        Polymer({
          is: "hello-element"
        })
      })  
    </script>

You can preview a Plunker example here.

Angular2

Angular2 is a bit more complicated but makes sense. We first declare the component with a selector and template property and then export it as a class.

I believe this looks a bit more ES6 oriented as we import and export modules in a sense.

    import {bootstrap}    from 'angular2/platform/browser';
    import {Component} from 'angular2/core';

    @Component({
    selector: 'hello-component',
    template: '&lt;div&gt;Hello there&lt;/div&gt;'          <b>//Template Declaration</b>
    })

    export class HelloComponent { }             <b>//Component Declaration</b>
    bootstrap(HelloComponent);

You can preview a Plunker example here.

Angular 1.5

In Angular 1.5 we can just run the component method.

 var module = angular.module("app", []);
module.component("helloComponent", { <b>//Component Declaration</b>
template: "Hello there" <b>//Template Declaration</b>
});

You can preview a Plunker example here.

React.js

React is the library that we have grown accustomed to love to hate love.

It has become I think the most preferred framework and below is an example why. It is extremely performant and with a small learning curve.

function HelloComponent() { return <div>Hello there</div> } <b>//Template Declaration</b>

ReactDOM.render(
<HelloComponent />, <b>//Component Declaration</b>
document.getElementById("container")
);

You can preview a Plunker example here.

Ember.js

Ember.js is the old wise framework that has still a lot to offer but (for me) was one of the most difficult to wrap my head around.

<script>
App = Ember.Application.create();

Ember.Component.extend({
classNames: ["hello-component"] <b>//Component Declaration</b>
});
</script>
<script type="text/x-handlebars" id="components/hello-component"/>
<div>Hello there</div> <b>//Template Declaration</b>
</script>

You can preview a Plunker example here.

Aurelia

Aurelia is the new kid on the block being built with modern standards and practices.

<template>
   <require from="./hello-component.html"></require>
    <hello-component></hello-component> //Component reuse
  </template>
</pre>

You can preview a Plunker example here.

TechDays Online September 2016 (led by MVPs)

Don’t forget to tune-in from the 12th to the 16th of September at the MVP led TechDays Online event!

MVP_Logo_Horizontal_Preferred_Cyan300_RGB_300ppi

“Building on the success of the online event in May, we will be working with our leading MVPs and Community Leaders to deliver bite-size technical sessions that offer a real-world perspective on how our technology is, and can be used by customers and partners.  The 5 day agenda is packed full of community led conversations, demonstrations and how to technical information.  We will be covering; DevOps, the Data Platform, BOTs, HoloLens, Microsoft Azure, IOT along with innovations from the team at Microsoft Research Cambridge.”

This event will be taking place at the Microsoft Campus in Redmond and each day will offer the following topics:

Monday, 12 September: Explore the world of Data Platform and BOTs
Tuesday, 13 September: DevOps in practice
Wednesday, 14 September: A day at the Office!
Thursday, 15 September: The inside track on Azure and UK Datacenter
Friday, 16 September: Find out more about Artificial Intelligence

Register here => https://www.eventbrite.co.uk/e/techdays-online-september-2016-led-by-mvps-tickets-27251539087

Working with Polymer.js Elements | Pluralsight Course

Another Polymer.js course is out into the world, featuring “Working with Polymer.js Elements”.

https://app.pluralsight.com/courses/polymer-js-elements-working

Polymer.js is one of the most promising frameworks available because it allows you to use web components efficiently. In this course, Working with Polymer.js Elements, you’ll go over the Polymer Element Catalog to see the tools and action necessary for creating and publishing custom, reusable elements. First, you’ll see some examples of each of the element sets. Next, you will create your own custom and reusable element. You’ll finish with creating tests for you element as well as publishing and sharing it. By the end of this course, you’ll be ready to tackle your own custom elements using Polymer.js.

workingWithPolymerjs

Getting Started with Polymer.js | Pluralsight Course

My new Pluralsight course is now live with the title “Getting Started with Polymer.js”. It is an introductory course on the Polymer.js framework and it is for web developers of any level.

You can preview the course over here => https://app.pluralsight.com/courses/polymer-js-getting-started

And all of the demo code over here => https://bstavroulakis.com/pluralsight/courses/polymer-js-getting-started/

For an in-depth course review you can check out Kevin O’Shaughnessy’s blog posts => https://zombiecodekill.com/2016/06/21/getting-started-with-polymer-js/

“Google’s Polymer.js framework for software development gives extra functionality to Web Components. This course will introduce you to this up-and-coming, element-focused development approach and how you can apply it to your own projects.”

getting-started-course

Polymer.js 1.0 Dashboard with Material Design | Polymer-Dashboard.com

On February I was working with Polymer.js 0.5 and created a small project to test this awesome framework out. => https://bstavroulakis.com/blog/web/polymer-dashboard-using-material-design/

After many learning mistakes, testing around and with the release of Polymer.js 1.0 I rewrote the project.

You can find the new project at https://github.com/bstavroulakis/polymer-dashboard and
a demo at https://demo.polymer-dashboard.com/pages/auth/auth.html

Username:bill
Password:polymer

You can give it a swirl, test around and even fork, send commit requests and use it on your own projects as well.

polymer

 

Review | The 4-Hour Workweek: Escape 9-5

4hourBook

Introduction

I recently read a book with the title “The 4-Hour Workweek. Escape the 9-5, Live Anywhere and Join the New Rich”. There is a lot of craze over this book and would like to share my thoughts on it.

Short Description

This book basically covers ways to automate processes in your life and your business. It also emphasizes the importance to clearly set goals, eliminate the noise and that you can do less with more. It goes over the 80/20 principle and that you can let go of most of your customers and focus only on what works.

Read More…

MVP V-Conf | May 14 & 15, 8am-6pm (PT – Pacific Time)

The MVP Virtual Conference (MVP V-Conf) is a new, virtual, 2-day event that showcases how the best and brightest independent technology experts are using Microsoft technologies today. Tune in and see what the community of power users are saying about the mobile-first, cloud-first world of possibility with Microsoft re-imagined.

VCon_Hero

Here is a high level overview of the event:

  • –  World-class free online conference that features technical content presented by Americas’ region MVPs that is open to the public
  • –  More technical content (Level 200, 300, 400), less marketing
  • –  5 tracks: IT Pro English, Dev English, Consumer English, Mixed Spanish, Mixed Portuguese
  • –  Event will be broadcast via Lync using L+ which enhances the conferencing capabilities of Lync
  • –  Two full days of sessions with simultaneous webcasts running across all 5 tracks
  • –  Thursday May 14th and Friday, May 15th
  • –  Start at 8am PT and running until 6pm PT (Pacific)
  • –  Day 1: 45 sessions + Keynote, Day 2: 50 sessions
  • –  Keynote on Day 1 to be delivered by Steve ‘Guggs’ Guggenheimer, Corporate VP of DX
  • –  On Demand content available via Channel9
  • –  This event is not just for MVPs, it’s for everyone!
1 2 3 5  Scroll to top