According to the awesome Google Evangelists, it's clear that Polymer is a refactor of the browser API, wherein HTML5 and CSS capabilities are optimized to make life on the front-end more tolerable, and to provide end-users with a more coherent user experience. Think of it as UIKit, for you iOS'ers, on the browser. With that, Polymer may be in a similar competing space as others, such as famo.us.
However, Polymer is unique in that it is an HTML-side only technology. The binding comes native with the browser. So where others leave it to the developer to implement their bindings on the server, with Polymer, the server is simply interacting with the browser. Hence, the browser handles the binding, and the entirety of the UI with the use of Web Components and Shadow DOM (DOM within the DOM). For now, you'll have to install components in to your app, but don't be surprised that in the future there will no longer be a need to install core components in an app, custom components will likely remain imported.
A more thorough discussion of what is Polymer can be found at http://www.toptal.com/front-end/polymer-js-the-future-of-web-application-development
After reading through, and spending time to find how or what is this technology, and how to use it-- it became more clear that it is simply a more direct way to utilize HTML, and make more simple design, hence more solid, applications. I'm going to walk through some of the steps I took to get started with Polymer on Node.js.
The cleanest implementation of a static HTML file server exists in the express framework:
var express = require('express') // express 4
, app = express()
, port = 1117
, ipaddr = 'localhost';
app.get('/', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
app.listen(port, ipaddr, function() {
console.log("Server up on " + ipaddr + ":" + port);
});
The next step was to import the components. I opted for the lazy way, and drag and dropped them from the zip file that was provided by the tutorial.
The structure of the app became like so following the integration of components:
toplevel dir ------------
|
server.js
public -----------
|
index.html
node_modules -
|
express
components ----
|
web components here
I also used the Polymer HTML sample code (https://www.polymer-project.org/docs/start/tutorial/intro.html). The index.html file was:
<!doctype html><html><head> <title>unquote</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <script src="../components/webcomponentsjs/webcomponents.js"> </script> <link rel="import" href="../components/font-roboto/roboto.html"> <link rel="import" href="../components/core-header-panel/core-header-panel.html"> <link rel="import" href="../components/core-toolbar/core-toolbar.html"> <link rel="import" href="../components/paper-tabs/paper-tabs.html"> <style> html,body { height: 100%; margin: 0; background-color: #E5E5E5; font-family: 'RobotoDraft', sans-serif; } core-header-panel { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } core-toolbar { background: #03a9f4; color: white; } #tabs { width: 100%; margin: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-transform: uppercase; } .container { width: 80%; margin: 50px auto; } @media (min-width: 481px) { #tabs { width: 200px; } .container { width: 400px; } } </style></head><body unresolved> <core-header-panel> <core-toolbar> <paper-tabs id="tabs" selected="all" self-end> <paper-tab name="all">All</paper-tab> <paper-tab name="favorites">Favorites</paper-tab> </paper-tabs> </core-toolbar> <!-- main page content will go here --> </core-header-panel> <script> var tabs = document.querySelector('paper-tabs'); tabs.addEventListener('core-select', function(e) { console.log("Selected: " + tabs.selected); }); </script></body></html>
To have the components path accessible for the static resources, server.js was modified to include:
app.use("/components", express.static(__dirname + '/components'));
By starting the app and visiting the port on the browser, it became clear that the magic of Polymer was indeed in action. The few lines displayed a very zen-like user interface, and excitement began to ensue.
In essence, you can get a Polymer app going with the following server.js file:
// configure API
var express = require('express') // express 4
, environment = require('./env.js')
, app = express()
, port = environment.PORT
, ipaddr = environment.IPDR;
app.use("/components", express.static(__dirname + '/components'));
app.get('/', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
app.listen(port, ipaddr, function() {
console.log("Server up on " + ipaddr + ":" + port);
});
Add the HTML, and run the following dependencies.sh file to add your project dependencies:
#!/bin/bash # install express 4 npm install --save express@4.x.x # add Polymer to project mkdir polymer_local; cd polymer_local git clone https://github.com/Polymer/tools.git ./tools/bin/pull-all.sh # move components dir mv components ../components # cleanup cd .. rm -rf polymer_local
It takes a while for the script to load (~350MB of downloads!!). At that point you will have many web components available, and including some pretty cool instruments that I know will keep me busy from some time to come.
Here are a couple of the many resources available for your practice:
https://www.polymer-project.org/docs/start/creatingelements.html
http://code.tutsplus.com/tutorials/using-polymer-to-create-web-components--cms-20475
http://customelements.io/
http://ebidel.github.io/material-playground/
https://www.polymer-project.org/tools/designer/
http://www.ibm.com/developerworks/library/wa-polymer/
I hope this helps you to rock and roll with Node.js and Polymer. Enjoy.
No comments:
Post a Comment