Why I am going full JavaScript

Recently I claimed that I would go full FE. Since I’ve been working on couple projects utilizing Backbone/Marionette, I realized that it’s about time for me to go full JavaScript even for BE using nodejs.

To be honest, I did not use nodejs much except running nodejs via forever and some hello world type apps. However, I’m planning to use javascript for everything as much as possible. Reasons are:

  • Community seems to be there to support you
  • One scripting language for FE/BE
  • Data transport over HTTP is done using JSON mostly
  • Many 3rd party Rest APIs support JSON
  • Performance got much much better

So that means, I will dig up build process, deployment process, and CI for Javascript sooner or later, which I’m happy to investigate.

One tip on documentFragment

DocumentFragment created using document.createDocumentFragment inherits methods and properties from Node, so that means you can check if you appended any children objects to DocumentFragment by using this:

ECMAScript 6 modules

AMD is new standard in my book and I am glad that ECMAScript 6 introduces modules.

This blog has great depth of the new ECMAScript 6 module.

From the spec, importing a module is very flexible in ECMAScript 6, which I like a lot.
Examples are (also found in the blog above):

  • import { square } from ‘lib/calc’;
  • import { square, MY_CONSTANT } from ‘lib/calc’;
  • import ‘lib/calc’ as c;
  • import { square as squ } from ‘lib/calc’;

As you can see there are 4 ways to import.

Aslo it has requirejs like syntax such as:

which is very similar to AMD syntax

having much fun with backbone & requirejs

I’ve been working on a project that requires intensive javascript right now, so that I went with backbone and requirejs as fundamental framework for the project.

It’s multiple pages project so my structure would look something like this:

Obviously common.js defines paths and shim for require.config that are shared among all pages.

Each html page has require’s initialization code like this:

That way, common js containing require configuration can be shared among pages. Also I did not want to create main.js to reduce a number of javascript files.

apps directory contains page’s main javascript files. So in the example, I have 2 pages, which are home and profile, so I have home.js and profile.js. Those app javascript files are the key piece that has the core business logic to pulls necessary views, models, and necessary lib files for the page.

Everything has been very modularized and between modules, communication occurs via event aggregator, which is yet simple, but very very powerful. Without that, I don’t know how I would have separated logics and made them still modularized.

I really like how you can modularize your javascript code with requirejs. I think that is one of best things that were invented for javascript!

faded images by category

Today someone asked me how to implement fading images by category. Triggering event should be “click”.
So I made a sample page for him and it took literally less than 10 mins to achieve the effect.

Here it is.

nodejs and forever

When I first learned nodejs, its version was something like 0.1.x. Also back then setting up nodejs application as service so that it keeps running continuously was a bit daunting job.

Now with nodejs v0.10.10 and forever, that issue is gone.

One thing I had a trouble with installing forever was “-g” option. This is what needs to be executed.

sudo npm install forever -g

using forever to start an nodejs app is easy as pie.

start your app
forever start yourapp.js

list running nodejs via forever
forever list

kill a nodejs app via forever
forever stop {indexnumber}

Even if you kill the process with kill {pid} your nodejs app will come back live, so you have to kill the app via forever.

good stuff.

note: when installing the latest nodejs I had a trouble adding repository “ppa:chris-lea/node.js”:

sudo add-apt-repository ppa:chris-lea/node.js

This guy’s post has the solution to the issue of add-apt-repository being not valid command.

sudo apt-get install software-properties-common

javascript frameworks: angularjs

Ok I admit that I lacked the latest javascript frameworks such as AngularJS or Backbone.js.
So I decided to do some digging around those frameworks starting with AngularJS as that’s the one of the questions interviewer want to ask about. I’ve asked multiple times already and was neglected to learn more about it until this morning.

First thing first. minified javascript file size is 82KB. Maybe I have not adapted to the new mindset that many users have high speed internet service so 82KB is small number to download? I still think that 82KB is pretty big file. That is another reason why I avoided those frameworks as much as possible. On the second thought, server side gzip will take care of that issue much since compression rate against static text files is pretty damn good.

Ok. going back to learning more on angularjs… will be back…

Look at your html page as xml data for the sake of SEO

I’ve been working on a script that goes to a URL and scraps some parts of data, which is pretty much a crawler or spider.

If all pages that the crawler landed were valid, my job would have been so easy. However, in reality many many pages are not valid and the script has to use regular expression.

This can be a good or bad thing for those web owners.

However, exposure is very necessary in terms of marketing for the site and valid html page means it has greater chance to get exposed by search engines such as google.com because valid html page will provide what search engine crawler wants more efficiently.

I believe engineers who work on those crawler have overcome many difficulties due to the invalid markup on a page. However, if HTML in a page is not valid (treating it as a xml), those smart engineers would have to come up with a logic to overcome that by using regular expression perhaps. That could be prone to mistakes so lead to scrapping only few from invalid HTML in a page. After all engineers are human and human make mistakes.

Also just for the same reason, if well formed semantic HTML is used, it will have higher chance to get exposed to a certain keyword typed by users.

That’s just my idea of how html page has to be constructed considering SEO and future use.

So my recommendation is this:

1. Treat markup in a page as data. Forget about presentation and such. Just make sure the data is valid.
2. Use CSS to visualize the data (= HTML markup) to appeal users

It’s quite simple after all.

phantomjs on centos 6.2

Right now I have jenkins to do automation build and static code analysis for php projects. However, I need to look into client side javascript automation unit test suites and selenium server to do client-side functional test.

This post will be a long history of what I am going through (will include steps with failures…)

1. I downloaded phantomjs-1.7.0-linux-x86_64.tar.bz2 binary file from this page.

2. When I executed it, I got this error:
phantomjs: error while loading shared libraries: libfreetype.so.6: cannot open shared object file: No such file or directory

3. So I installed libfreetype.so.6:
sudo yum install libfreetype.so.6

4. I still get the same phantomjs error, which says libfreetype.so.6 is not found.

5. Looks like the libfreetype.so.6 was installed on /usr/lib, which is for 32 bit software and phantomjs needs one for 64 bit system.

6. So I created symlinks and placed them in /usr/lib64/

7. I get different error message (progress made!):
phantomjs: error while loading shared libraries: libfreetype.so.6: wrong ELF class: ELFCLASS32

8. It turned out that I just needed to install freetype:
yum install freetype

9. Now another dependency issue:
libfontconfig.so.1: cannot open shared object file: No such file or directory

10. “yum install fontconfig”. that installed correct lib files.

11. Got it installed. 🙂

[xxxxx@localhost ~]$ phantomjs –version
1.7.0

UPDATE Dec 6, 2012
Found this blog post for Phantomjs and qunit.

Another very resourceful answers at stackoverflow regarding phantomjs, ant, and jenkins.

Resources: