Monday, August 25, 2014

Web Component


This paper is a synthesis about I heared and rode about Web Components.
To make this article, I used mainly InfoQ video of Julien Vey and html5rocks web site.

Web Components is W3C standard which is at DRAFT status.So, you will have to wait before it arrived. However, it is possible to use because main actors of the web (Mozilla, Google ...) started to work on this specification.


What is a Web Component ?


Here is a good definition I found on article of Julien Vey d'InfoQ :
Web Components permit developpers to create HTML tags which are reusable and customizable.For example, here is a tag <my-own-tag> : 
<element name="my-own-tag">
 <template>
   html tag here
 </template>
 <script>
   // JavaScript
 </script>
</element

Note : When it will be implemented and approved by W3C, it will be possible to reuse a component on all web navigator !

Why look at Web Component now ?


- It is a web standard of W3C.
- Main actor of web began to implement it.
- It will change way of working in web developpement because components will be reusable on all navigators.

Web navigators and Web Components


A good summary of specification and implementation is avaible here : are we component yet ?
Now, there is a lot web navigators that doesn't support Web Component.However, it exists emulation for Web Component : polyfills.Polyfills permits to start using Web Component.

Here are some project :
  • x-tags : x-tags is a Mozilla JavaScript library which works on all Web Navigators.
  • Polylemer  is a Google library ( there is a talk on Google I/O )
  • UI library for Dart : web-ui
  • toolkitchen

Web Components 


Templates


Here is an example of template :

 <template id="">
 </template>

Template is simply a reusable peace of code.You have to note that Web Component are parsed but not executed and picture aren't load in memory.

Shadow DOM


Shadow DOM permits to make encapsulation without iframes. So we will mask implementation of a tag.

For example :

In the source we have our tag :

<div id="mondiv"></div>


When we will show the HTML web page, we will have :

<div id="mondiv">
<h2>mon contenu</h2>
</div>

The content are fill at execution.
To instanciate this shadow DOM, you can :


  • Use JavaScript

For example :

var shadow = ....
shadow.innerHtml="<h2>mon contenu</h2>"


  • Use Insertion point

We define a div with our content :

<div id="host">
</div>

This tag will permit to show our content :

<content></content>


Custom element


A Custom element will contain all we saw before :

<element name="moncomposant" extends="button" constructor="moncomposant>
     <template>
    </template>
    <scritp>....</script>
</element>

In my web page :

<link rel="component" href="moncomposant">
<moncomposant></moncomposant>

Other things


In this paper, I didn't address mutation observer and model driven view which permit to make databinding and evaluate performance...

More infos


http://www.html5rocks.com
http://www.infoq.com/fr/presentations/web-components
http://www.infoq.com/fr/news/2013/06/webcomponents

Friday, May 30, 2014

Deploy your Tomcat Grails website on OpenShift






Deploy your Grails web site on OpenShift

I use OpenShift cloud to deploy my web site made with Grails. This article will give you a summary of what you have to do if you want to deploy a web site on OpenShift cloud. It will also give some advice and feedback.

 

 Which way to deploy your Grails application on OpenShift ?

The best way I found to deploy my Grails application is to build a war and then deploy it on Openshift.

By default, Grails has the war command available : grails war

See also the Grails web site for more details about it : http://grails.org/doc/2.2.1/ref/Command%20Line/war.html


Note :

  • You can use Tomcat plugin to makes Tomcat the default servlet container for Grails at development time.
  •  You can delete unwanted files in your war by adding some configuration in Config.groovy :
    1:  grails.war.resources = {  
    2:     stagingDir -> delete(dir: "$stagingDir/selenium")   
    3:  }   
    


Install and configure Openshift client


First of all you have to create an account on Openshift then you will be able to install and configure openshift tools. You only have to install rubygems and git package. For example, on Gentoo, type the following commands :

 emerge dev-ruby/rubygems  
 emerge git   


If you don't have Gentoo, you can see on the openshift website : https://www.openshift.com/get-started#cli
Then, you only have to execute following command :

 gem install rhc  
 su - user  
 rhc-setup   


Here is an example :

#rhc setup
OpenShift Client Tools (RHC) Setup Wizard

This wizard will help you upload your SSH keys, set your application namespace, and check that other programs like Git are properly installed.

Using XXXX to login to openshift.redhat.com
Password: ******

OpenShift can create and store a token on disk which allows to you to access the server without using your password. The key is stored in your home directory and should be kept secret.  You can delete the key at any time by running 'rhc
logout'.
Generate a token now? (yes|no) yes
Generating an authorization token for this client ... lasts about 1 month

Saving configuration to /home/USER/.openshift/express.conf ... done
Checking for git ... found git version 1.8.5.5
Checking common problems .. done
Checking for a domain ... MYDOMAIN
Checking for applications ... found 1
  opendoowap http://opendoowap-totalprog.rhcloud.com/

  You are using 1 of 3 total gears
  The following gear sizes are available to you: small

Your client tools are now configured.



Deploy your application on the cloud

Once, you can access with ssh and you have a war application, you only have to copy it on your account.OpenShift uses Git to push your application on the cloud : https://www.openshift.com/developers/deploying-and-building-applications

In our case, you had to make some change if you want it works. See my tips : http://totalprogus.blogspot.fr/2013/12/problem-while-deploying-rootwar-on.html

Access in your application

 

How to connect with ssh ?

  • Go and Log in openshift website.
  • Clic on Application tab
  • Clic on your application









  • At the right of the screen, clic on the link : "Want to log in your application 
  • Copy the line in your console.

For example :

#ssh 529e2274e0b???b@myapp.rhcloud.com


Usefull commands

help
tail_all
ctl_app stop
ctl_app start

If you want more details, here is usefull links :

  • https://www.openshift.com/developers/remote-access#keys
  • https://www.openshift.com/get-started#cli


Visit your website

 The access link for your web site is in the openshift website ( Clic on your Application in the Application detail ).

Response time very long

I had a problem with very long time to first access to my web site.I found solution on StackOverFlow :

 openshift : my local gears often timeout and go down which cause response time very long

If you do not access your application for 24 hours, it will get idled (if this is a free acount), and depending on how large your application is, it could take awhile to spin back up when you do access it again.



To conclude


Deploy a web site on OpenShift cloud was not really diffcult.Just keep in mind that whit free account you have to access every 24 hours to your web site. Some people has also difficulties with proxy configuration ...
If you wan to see an example of source code, you can look at my GitHub project example : https://github.com/drieu/fjLearning.You can also visit the project on the web at opendoowap-totalprog.rhcloud.com