I am making myself busy in learning Google Polymer since last 2 weeks. Believe me, Google Polymer is the future, not because of it is developer by Google, because of it’s Web Component development style.

Today morning, I was trying to integrate Google Polymer with VisualForce. I searched in Google, but there was hardly any stuffs how to integrate Google Polymer with VisualForce. So I thought why not document the basic steps with a Hello World example to demonstrate the integration of Google Polymer with VisualForce.

Let’s start –

Step 1:
Download Google Polymer on your machine. Please refer my previous blog post to understand the procedure.

Google Polymer – How to install

Step 2:
Once you download the polymer, you will find a folder named “bower_components”. Compress the folder with the name “Polymer.zip”. (Note: you can choose any name here :-))

Step 3:
Upload the Polymer.zip as static resource in your development environment as shown below –

Step 4:
Create your web component(New VisualForce Page) with Label: Hello-World, Name: Hello_World
<apex:page contentType="text/plain">
     <link rel="import" href="{!URLFOR($Resource.Polymer, '/bower_components/polymer/polymer.html')}"/>
     <polymer-element name="Hello-World" noscript="true">
        <template>
            <p>Hello <b>SUDIPTA DEB</b> from Google Polymer Web Component</p>
        </template>
    </polymer-element>
</apex:page>
Note: Created web component “Hello-World”.
Step 5:
Create the VisualForce Page(testHelloWorld) to refer the Web Component as shown below –
<apex:page >
    <script src="{!URLFOR($Resource.Polymer, '/bower_components/webcomponentsjs/webcomponents.min.js')}"/>
    <link rel="import" href="/apex/Hello_World"/>
  
    <body>
        <!-- Declare the web component by tag -->
        <Hello-World></Hello-World>
    </body>
</apex:page>
Note: In the body section, I just referred web component by name. Before that I just imported the previously created web component file named “Hello_World”.
Step 6:
Now when you check the page, you will find – 
Great!!. So finally we have successfully integrated Google Polymer with VisualForce. Now it’s time to explore both the sea – Google Polymer and VisualForce.