Yii is highly OOP, well organized and extendable

At low level, Yii wrap PHP functions into Utility classes such as CHttpRequest to manage requested URI, cookies, referrer URL, CUrlManager to parse and build urls consistently, CMap to manage array of key-value items or CPropertyValue to convert and use type-safe value.

It helps PHP beginner achieve the expected result using best practice code by calling one single method. It also help experienced coders save lot of time.

At high level, Yii use common application design patter, MVC. It breaks an application into different components such as user component, database component, error handler component, log component, etc. With the component approach:

• You can add or remove components to make the application more extended or lighter.
• You can override a Yii component to modify or extend its features

Yii extensions system allow community to add useful extensions such as a multi-file ajax upload, an image processor.

Yii is for rapid development

Yii knows the common and tedious tasks most developers are tired to deal with.

Use CHtml to write HTML form element faster and standardized. You will found it helpful when checking generated page with XHTML validator or when trying to reproduce user inputs in a form after submission.

Use Yii code generator tool, available in both command line and GUI to generate MVC elements including Model, Views and Controller classes. The generator learn from table schema basic database constraints such as type, length, allow null, etc. so data will be validated automatically before saved.

Yii is configurable

All application components are configurable by passing an array of properties to initialize the component. A typical configuration task is configuring DB connection. Yii configuration array using keys as property names and values as property value which is easy to guess and learn the component insight be reading the code without referring to document.

Yii has system-wide parameters allow you to add your custom parameters into your application and reduce hard-coded values.

Yii is ready for big and complex applications

In a big application you will find OOP’s concept of reusable component helpful. Reusable components make your application more manageable and testable. Developing an application with reusable components approach in mind is also more delightful and Yii supports you at different levels:

• Write independent utility classes so you can use them as helps in different projects and step by step make the classes bug-free and speedy
• Add in library that your team or company use frequently like PDF generator, CSV importer, Image processor
• Override and extend basic application components such as UrlManager, CWebApplication, CController. As a framework, Yii has to be generic in implementing these components but depend you the type of web applications your team or company build up, you can customize the components to best fit your needs.
• Write widgets to show common HTML content and widget for common used forms such as login form, registration form, contact form, etc.
• Break your application into modules so that common modules such as user management, back office, etc. can be reuse in other projects.

Data manipulation is usually the major work in an application. Yii supports different DBMS system and also support multiple databases.

There are also two options for data manipulation. You can use ActiveRecord to deal with databases whose schemas are very likely to be changed many times during development time.  You can also use your optimized SQL commands to improve performance. If you do not really optimize SQL command but still think that SQL is faster than ActiveRecord, you can try caching DB schema.

In a complex application, Yii provide additional components to deal with advanced requirements:

• Log and error handler components help you log message, track the execution and handler errors the way you want, for example, sending email to someone anytime an error occurs.
• There is user manager component to manage user session and login/logout process.
• Yii also has 2 levels of authentication. For quick and simple authentication, you can use filters which are run before a controller action. Your filter can allow or deny user to execute an action depend on whether they are logged in or not. For complicated application which needs roles and role base access control, Yii provide RBAC authentication system.
• Different types of caches are available in Yii. You can use CMemCache, CApcCache or CDbCache. The other cache extensions are EAccelerator, XCache, ZendDataCache. Yii provides you mechanism to cache data (variables) or generated content. You can cache part of the pages or you can cache the whole page.
• Yii support internationalization and localization with message translation, data formatters, different views per language

There are many other things we do not mention is this overview of Yii such as theming, template engine, security, web service or Ajax form, object behavior, event-driven programming. All of these capacity help to make Yii a very ideal choice for your web application framework.

This article is from http://www.flexicacms.com by Hudson Nguyen.

Yii is so great but using it in real application could be a little challenge considering the its code base. Therefore, I keep looking for a good CMS based on Yii to be rolled out with some essential components such as a Back Office (Administrator panel), User management (with some permission would be nice) and a good method to manage site structure and navigation system. Web3CMS or dotPlan are two of the very first Yii based CMS but dotPlan is still buggy and Web3CMS looks does not look really appealing to me it has a quite simple homepage.

I got immediately excited when I check FlexicaCMS gallery on their site. Version 0.2 is even much more better than Web3CMS version 1.x.x with a demo about a complete corporate site (a little bit sad that admin panel is not accessible). The gallery show FlexicaCMS has installation wizard, a nice and clean administrator zone and the most impressive thing is some screenshots showing that you can edit page content right on the page without accessing to administrator zone. It shows that a FlexciaCMS page is combined by many widgets (a concept of reusable component in Yii) and for each widget, you can customize it by clicking on the pencil icon on top right of the widget. The popup show widget properties that you can change and what nice is properties are not simply textboxes but also drop-down boxes for predefined options/values. I notice this is an amazing and very user friendly feature because with textboxes, you can enter anything you want or most of the case, you don’t know what to enter.

To be able to get more insight of FlexicaCMS, I have to download its source code and this maybe a little issue of the author. There is no zipped version but you need to know SVN or in a Windows machine you must have SVN client to download source code from their SVN. Once I installed it on my local and start exploring the Administrator Panel, it make me really impressive as these guys do make a lot of work. The site structure is managed by a hierarchical pages list, unlimited levels. It’s pretty nice that you can drag-n-drop to move pages around too. Making menus it much more easier than using Joomla as for a menu, what you need is to choose the pages you want to show in your menu. When i try on my local test, multi-level menu is possible.

One more feature I notice in this set of CMS components, site structure – menus – urls, is the URLs are user friendly which mean FlexicaCMS supports SEO. Each page has an URL and you simple use the friendly format to define this URL, no regex or something similar level of complexity needed to defined that part of the URL is parameter. All you need is wrap the parameter in [ ] bracket. For example, the URL of blog post page look like this: blog/[postAlias].html. Also to support SEO, I see each page has its own Seo title, meta description and meta keyword and comparing this feature with Joomla, if I am not wrong then Joomla does not has the similar feature because it does not have page concept. The menu that you click on to go to a webpage in Joomla is built on the fly using a wizard. Well, somebody will not agree with me about this but what I mean is the core of a CMS.  Of course Joomla must has dozen of SEO components.

It looks like FlexicaCMS try to “steal” the idea of taxonomy from Drupal. It has a category tree which in a page called Content and Structure. When expanded all category nodes, one can easily see the way things are categorized. There are a couple categories for user roles, some categories for news and some for FAQs. I wonder how this categories set make content management become confused if I create an article and assign it to a user role category but the author got me. After going around the Administrator panel for a while, I understand what the author said on their site about modules. So users or news or FAQs are modules that each of them has a setting parameter call ROOT_CATEGORY_ID which is set to a category in the system category tree. That is why when you edit or create a article in News module, you see only part of the category tree used for News. To be honest, if someone love Drupal taxonomy then he should love this “system” category tree idea. Having this category tree ready mean in your new module that you plan to add into FlexicaCMS, if you need any categorization feature then you don’t have to re-implement the category management for your modules. This is not only a tedious work but also not easy at all, considering you want to show the category in a tree view and you want your users to drag-n-drop category, reorder them or move them from one parent to the other.

FlexicaCMS use Yii’s standard module structure. Something similar to Joomla’s module structure and not existed in WordPress. What I like in FlexicaCMS when I look at the code of existing modules is making a module menu in Administrator is very simple. Also, each module has its own set of setting parameters in users has a GUI page in Administrator panel to manage settings. He can even delete or add new setting parameters but this feature does not make any sense to me. What if the administrator delete an important parameter ?!? This advanced feature should be limited to developers to use in development time only. Well, I have not finished exploring this interesting CMS so I might be lousy about this, who know.

With the same approach when I study a new CMS, what I need to do first when I start thinking about using the CMS is how can I create my module and customize something I see on the front pages. These FlexicaCMS guys do convince me as they add in the Administrator panel a tool to generate code. Holy shh… I can create a new module with some click and it looks like I can generate all the admin pages for my modules if I create DB tables and use the Admin page generator tool. This can be just a leverage of Yii generator tool but anyway, it is good as long as I do not have to type commands into the console window.

I have not been able to create a page and show it on front-end as checking the existing pages in FlexicaCMS sample, they all use widgets to show content but I am a little disappointed to find out that the core widget class, CmsWidget.php is encrypted. It mean unless FlexicaCMS author publish some tutorial about making widget, it will be very hard for developers to do it themselves. Luckily, the author announced in their roadmap that FlexicaCMS will be totally open source and free for personal use (non commercial or commercial products). I can’t wait until that day ! or, I may try to get the author give me a copy of encrypted files we will see.

In conclusion, FlexicaCMS can be considered at the first Yii based CMS and a very potential CMS. The roadmap look good if they don’t say what they are not doing ! Personally, I believe that if version 0.3, 0.4 and then 1.0 is released as an open source then not only Yii developers will consider using it but also FlexicaCMS can help Yii spread out and good OOP programmers do have more options to choose for their projects. Joomla or WP will not be the remaining option when Drupal is quite hard to learn as well as to use and definitely not fit into a tight budget.

More links and information:

FlexicaCMS and its demo.

Gia Han Online Solutions – established by Hudson Nguyen (Hưng Nguyễn), and before was Artermis Software LLC, is a leading company in Vietnam outsourcing web development projects on LAMP platform. The company is well-known by its technical skills and difficult examinations in job interview.

Although WP’s plugin architecture is really not good, the WP’s team have added in a really interesting tool that help integration between WP blog and hosting site easier. It’s XMLRPC services. Here are some scenarios if you has a WP blog and you want to integrate it with another site, you will found XMLRPC helpful:

• Showing latest posts/comments on the site homepage
• Provide links to categories in your blog
• Turning your WP blog into a collaborative environment for your site’s authors

Off course, the 3rd scenario look very interesting especially in case your site is quite static, you need to update content by manually update HTML files or you are using some kinds of simple content management tools that do not support multiple user, authorizing process, tagging or categorizing. Though in the limitation of this post, I can only show how to use WP’s XMLRPC.

So, why XMLRPC why I can write direct SQL queries to get data (post, comment, category, etc.) from WP’s database ?

The answer is simple, do not reinvent the wheels. You can write queries for sure, but how about building friendly urls to the posts if WP change the perma link format ? Are your sure you understand the wp_terms table well enough for getting list of categories ? And are you sure to handle the logic of post status, post types, total posts in a category, etc. well ?

Those are enough to decide that XMLRPC must be use when an external want to get something from your WP’s blog. It’s no need to mention about the situation you run your site on one server and WP on another.

Turn it on !

XMLRPC is turn off by default, otherwise some wise users of your blog who has access to it can take your content away. So, turn it on with care. You know where it’s but you might not know what it’s about. Just in case you don’t remember, go to Options > Writing page and check the option Enable XMLRPC.

Get list of available services

Now you can use XMLRPC, just get list of what services you can use. It’s provided on WP’s codex XML RPC page:

http://codex.wordpress.org/XML-RPC

A simple usage sample

include_once('wp-includes/class-IXR.php');

define('BLOG_ID', 0);
define('RPC_USERNAME', 'admin');
define('RPC_PASSWORD', '***');

$client = new IXR_Client('http://your.blog.path/xmlrpc.php');
$client->query('wp.getCategories', BLOG_ID, RPC_USERNAME, RPC_PASSWORD);
$categories = $client->getResponse();

print_r($categories);

To use XMLRPC services, you must create an IRX_Client object. If you want to go in deep, the implementation code of this class is in wp-includes/class-IXR.php. The server that IRX_Client object will work with is defined by your blog’s url appended by xmlrpc.php. You must initialize the $client with this url.

Now, to call a service, the service name is always the first param of $client->query() following by service’s parameters. Most of the time, you need to provide BLOG_ID, username and password to login.

the getResponse() method of IRX_Client object will return result of your query, normally an array as in this case, we get list of categories in our blog. Simple and easy !

OK, but you don’t see what you need in the service list

Sometimes, you don’t.  Though there are many services implemented by the WP’s team, you must know somehow to extend the list. This is simple if you are familiar with some WP functions. Firstly, open the xmlrpc.php file and search for ‘function wp_xmlrpc_server’. This function is a map of XMLRPC query name and the actual functions that implement the logic.

$this->methods = array(
// WordPress API
'wp.getUsersBlogs'		=> 'this:wp_getUsersBlogs',
'wp.getPage'			=> 'this:wp_getPage',
'wp.getPages'			=> 'this:wp_getPages',
'wp.newPage'			=> 'this:wp_newPage',
'wp.deletePage'			=> 'this:wp_deletePage',
'wp.editPage'			=> 'this:wp_editPage',
'wp.getPageList'		=> 'this:wp_getPageList',
'wp.getAuthors'			=> 'this:wp_getAuthors',
'wp.getRecentPosts'     => 'this:wp_getRecentPosts',
'wp.getCategories'		=> 'this:mw_getCategories',		// Alias
//Still long list of services for other blogging platforms

Just take a look of one service, for example, the wp.getCategories we use and then you know how to write yours. Here is a sample of getRecentPosts that I added in my XMLRPC:

function wp_getRecentPosts($args){
$this->escape($args);

$blog_ID     = (int) $args[0];
$username  = $args[1];
$password   = $args[2];
$limit = $args[3];

if ( !$user = $this->login($username, $password) ) {
return $this->error;
}
$posts = wp_get_recent_posts($limit);
foreach($posts as &$post){
//use guid field as perma link
$plink = get_permalink($post['ID']);
$post['guid'] = $plink;
//Get author
$author = get_userdata($post['post_author']);
$post['post_author'] = $author->user_login;
}
return $posts;
}

That is. I am sure that if you spend time to write all the get_userdata, get_permalink, wp_get_recent_post stuff, you will need day(s). But if you use XMLRPC and just in case you don’t work with WP usual, refer to WP Codex’s functions reference page for utility functions you need, you can get what you need in hours.

Proven to be the fastest PHP framework, Yii helps its authors earn the second title (not official of course), beside their Prado fastest PHP web development framework.

I’ve been with Prado since 2006 and many websites build by my company are Prado based. Prado is a event driven, component based framework in which, everything should be wrapped as a component for reuse purpose, ease of usage, simple configuration and distribution.

However, share the common with many big names, Prado proved to be slow like Zend framework or Symfony. It’s also not easy for Prado to be widely used as its architect is very similar to ASP.NET, not the MVC model that PHP and Java developers be familiar with.

Yii is built with those lessons in mind (well, I guess ). Come back to MVC model, in general Yii is very similar to CodeIgniter or CakePHP. Yii Actions, Views and Controllers are almost the same but its also keep what are proven to be good in Prado, the component and controls.

A Yii control is called a widget clearly defined as a data presentation. For many MVC coders, this will help while programming and we can easily mix business processing and data presenting code together.

A Yii component is called an extension. Extensions are encapsulated so it is simple for coders to distribute their work among community.

With powerful core component for database management, form processing, extension and widget structure Yii empowers developers to develop mid-size web application. Yii 1.0.3 also come with module support so large scale web application can be divided into modules.

Web services empowers your application with a straightforward idea that you, your team or even the whole your company cannot develop everything but can use lot of professional services for free or by paying some money. There is also the situation when you need data that your web application is not the one collecting those information. Web services, in this case, provide data collectors a mean to expand their business by selling data or by publishing data on other websites to drive more traffics or generate more purchases.

The key behind web services is platform-independent communication by using XML and standard protocols. Your PHP script running on Apache/Linux can invoke a function written by ASP.NET on IIS/Windows or JSP on Tomcat/Solaris. There are two major types of web services: REST and SOAP. A REST request is relatively straightforward, as they involve making an HTTP request of a server and processing an XML document that’s returned as the response. Since most developers are familiar with HTTP and XML, the learning curve for REST is short and shallow.

The other popular web services format is SOAP, which is a W3C standard for passing messages across the network and calling functions on remote computers. SOAP provides developers with many options; however, this flexibility comes at a price. SOAP is quite complex, and the full specification is large and growing.

Beyond REST and SOAP, there’s one other web services format that’s relatively common, XML-RPC. XML-RPC is similar in spirit to SOAP, as it also converts native data into a language-netural format that you can pass into functions and receive replies. However, XML-RPC is far less complex than SOAP.

Making real calls

One of the very interesting places to learn about web services is eBay developer site and I will use eBay services to demonstrate many aspects of using web services in real. Of course, you have to goto http://developer.ebay.com and register your own account as the security key I use here is fake.

Just in case you are not familiar with eBay, it’s a place for users to sell their stuff, either old or brand new. In order to make it easier for sellers and buyers, eBay provide API set to let developers retrieve information about items, deals, bids, etc. The API sets are available for many programming languages of course as they are web services and the reason I use eBay is their document is perfect and me and my company was together with a client in US won eBay top prize for widget design contenst 2008.

For you to get first hand experience with web service, this is a good reference about how web service is setup, how you call it and how to use the result on your website.

Now, I know that not everyone is comfortable with handling XML. While we are talking about XML web services, it’s not true that returned result must be in XML format. Well, anyway business is to make ease for consumers and eBay did it. You will see that for one service call, you can specify the return format you want which can be NV (name-value pair), XML, JSON or SOAP. That’s to encourage you taking the next step because it’s more fun to make result into use without a need of knowledge about XML parsers. Though I am sure you will need some XML parsers sooner or later.

Calling a REST method

As REST is a style of web services in which you make requests using HTTP methods such as get and post, it is very easy to make a test before writing any PHP code. Open your browser with this URL:

http://open.api.ebay.com/shopping?version=517&appid=YourAppID&callname=FindItems&QueryKeywords=dog&ItemSort=BestMatch

And you should get some readable XML result if you remember to change YourAppID with a real value. Now you know what is the result of this FindItems method. Writing a PHP code for REST method is just something you already know.

$base = 'http://open.api.ebay.com/shopping';
$params = array('version' => '517', 'appid' => '...', 'callname' => 'FindItems', 'QueryKeyword' => 'dog', 'ItemSort' => 'BestMatch');
$url = $base . '?' . http_build_query($params);
$response = file_get_contents($url); ?>

or if you want to use cURL:

//Prepare the $url
$c = curl_init($url);
curl_setopt($c, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($c);
curl_close($c);

Calling a SOAP method with WSDL

To call a method using SOAP, you need SoapClient object. As SOAP is strictly typed, whenever possible you want to know the method description file which is described using WSDL (Web Service Description Language) and available in .wsdl format at the service provider host.

$client = new SOAPClient(’http://api.example.com/service.wsdl’);

SOAPClient construction method let you provide other options and an important one is the service location. Although the WSDL may specify these options by itself, it’s not the case of eBay WSDL for shopping API. This code shows how to call eBay FindItems method using SOAPClient.

$wsdl_url =     'http://developer.ebay.com/webservices/latest/ShoppingService.wsdl';

$client = new SOAPClient($wsdl_url,
array('location' => 'http://open.api.ebay.com/shopping?&callname=FindItems&version=517&siteid=3&appid=xxx'));

$result = $client->FindItems(array(                                 'QueryKeywords'=>'iphone',                                 'MaxEntries' => 30                                 ));
$items = $result->Item;

foreach($items as $item){
echo $item->Title.'<br />';
}

Figured out that GD2 is not good in production environment for image processing, I turned to an ImagMagic solution. Very lucky for me I found Asido. This cool library though at its 0.0.0.1 version provides some cool features like watermark, flip, flop, resize and crop. Asido works with image processing library through its drivers. Currently, it support GD, ImageMagic (php_imagick.dll), MagicWand (php_magicwand.dll) and image magic shell.

After half day strugling with Asido, GD driver does not make any improvement. Also calling resize() in a loop get error. MagicWand is expected to be the best solution as it’s the new ImageMagic library. Actually, result images are totally blank. I don’t test ImageMagic shell driver as some host will not allow to install ImageMagic. So the last thing to count on is ImageMagic classic extension.

It didn’t work!!! I was really crazy with this library. Calling resize() always get error imagick_readimage() is undefined function. Another half day pass, the PECL site points out that imagick_xxx() functions are for old version of imagick. The new one use a more OOP way, Imagick::functionxxx().

Pheew, at the end I spend 2 hours rewrite Asido ImageMagic driver for php_imagick.dll 2.x.x and it works like a champ. The result images quality can be compared with Windows Vista Photo Manager resize tool. Love it!!!

Fix Asido 0.0.0.1 ImageMagic deprecated functions

Image magic for PHP 5.2.x on Windows

I ported most of Asido features in ImageMagic driver but not tested as time is not allow. If anyone can make a test and post the bug, it would really help. Asido has bug tracker and support forum but really don’t know how to post something there.

I’ve spent more than one year with Prado, seeing the community grows day by day and people who I am talking too most say Prado is good and somehow, better than Zend framework or widely use CakePHP, Code Igniter.

As Prado document is not very easy to learn and their tutorials uses SqlLite as the database, most beginners are reluctant to learn it. That’s why I create this series of Prado training.

The Prado Hello, world

In this app, we learn some common .NET concepts in Prado. You should have first LAMP enviroment setup and Prado 3.1.2 (latest version when this article written) downloaded.

Setup your project

Extract the /framework folder to your disk as the Prado application need it. I will put it at /www/framework and my appliation will be at /www/hello. This is for reference in the next step.

Create your project folder structure using this command line:

php path/to/prado-cli.php -c hello

Note that you should stand at /www to execute this command so that Prado create the /www/hello folder for you.

prado-cli.php also provides some usefull command-line tool like generating active-record classes from Database. You will see it later.

Folder structure

Like any PHP framework, Prado creates the folder structure for your application.

• protect : is where code goes in
• assets : Prado resource files created at runtime. Must has chmod 777
• protected/runtime: Prado runtime folder contains application state, cache data, etc.
• protected/pages: configurable, store all web pages

We will look at application.xml deeper in another article but first you need to know that it contains application configurables information.

<service id=”page” class=”TPageService” DefaultPage=”Home” BasePath=”Application.pages”>
…
</service>

This shows some glues to you:

• BasePath: point to protected/pages folder. Here note that Prado uses . path syntax and ‘Application’ is mapped to folder protected.
• DefaultPage: Home is the file /protected/pages/Home.page. When you site runs, the URL is
  …/hellow/index.php?page=Home. However, the Home page is the default page, you don’t have to specify page paramenter.
• <service> tag is used to register the service to handle user requests. Depend on the id value,Prado load the service to handle user request. Here, when the first parameter on the querystring is page, Prado load an instand of TPageService to handle request.

OK, don’t wanna make you more confused about Prado configuration at this moment. Let’s go to the page and write some code.

Event based programming

Prado application handle user requests by handling the events. This is very similar to .NET web application where you have pages and a page has events such as Init, Load, PreRender, etc. Each controls in the page also has events. When user interacts with control, it will raise the event and you handle that event in the code to response to user request.

You will have to create  Home.php file in protected/pages folder if you don’t have one. The standard code template for a page class looks like this:

class Home extends TPage
{
  public function onLoad($param)
  {
  }
}
 

You can see the function OnLoad($param). This is where we write code to initialize the page whenever it’s requested by users.

Because Prado separates PHP code and HTML template, there must be ways for your code to pass data to your template, here is the Home.page file. Open it and edit the file:

<html>

<body>

<com:TForm>

  <com:TLabel Id="lblInfo" Text="Hello" />

  <com:TButton Text="Click me" OnClick="buttonClicked" />

</com:TForm>

</body>

</html>

You can run your app now and see the Hello text and the button Click me next to it. Click the button and you get an error message. This is normal as we haven’t declare the buttonClicked function to handle click event. Prado is Event based!!!

Our mission is 50% complete as you see the word Hello. Let’s do the 50% remain.

Add this code below function OnLoad in Home.php file:

protected function buttonClickec($sender, $param)
{
$this->lblInfor->Text = 'Hello, world';
}

Retest the page and you should now see expected result. Easy! isn’t it.

What we did is creating a function to handle an Prado control event. An event handler needs two params, $sender represents the object which fire the event and $param contains event data. Most of the time, you don’t care much about $param b/c changed data reflects in the control properties but for some events, you will have to learn what contained in the $param object/array. You have var_dump() and print_r() PHP functions with you, or you have Prado manual as your companion.

Talking about way to pass data from code to template, you can see that we access the label control  whose Id is lblInfo using this syntax: $this->lblInfo. You can write this because Prado will parse the template file before processing the php file. During this time, Prado creates propeties represents controls in the template.

A Prado control has many properties, Text is a common property for TLabel, TButton and TTextBox. Again, open Prado manual to learn more about Prado standard controls.

That’s all for a classic application. Now you know how to create a Prado project using prado-cli.php command line tool, see how a page is served and the events raised by a page or a control. In the next article, we will look into some Prado module, work with MySQL database using Prado ActiveRecord, ActiveRecord Scaffolding and SqlMap. We will also take a look at a very powerful control that Prado “borrows” from ASP.NET, the Repeater control, to show tabular data.

Most of beginners will found difficulties getting start with these frameworks. Main reason is traditional JS programmers do not use JS heavily in their web applications or use it in an unorganized way, without any best practice pattern. While OOP is not an easy programming method, using it in JS is also headache because of JS syntax. Many programmers use JS in procedural programming style by creating functions and hooking them up with events.

When the term Web 2.0 become a standard, JS is also become a key programming skill that a web programmer need to know. The procedural JS programming should be forget and with the coming of Prototype, jQuery or other JS framework the age of JS programming began. In this post, I want to cover the basic of JS language to build a solid based for JS programmers from where they can easily taking JS frameworks into use. JavaScript can do a lot of clever things that Java and C# can’t. Some of these can help you to write better code, and some can only help you to shoot yourself in the foot more accurately! It’s worth knowing about both, either to make use of the techniques or to avoid doing them unwittingly.

Objects in JavaScript

JavaScript doesn’t require the use of objects or even functions. It is possible to write a JavaScript program as a single stream of text that is executed directly as it is read by the interpreter. As a program gets bigger, though, functions and objects become a tremendously useful way of organizing your code, and we recommend you use both.

The simplest way to create a new JavaScript object is to invoke the built-in constructor for the Object class:

var myObject=new Object();

Let’s add a property to our simple object:

myObject.shoeSize=”12″;

In a structured OO language, we would need to define a class that declared a property shoeSize or else suffer a compiler error. Not so with JavaScript. In fact, just to emphasize the array-like nature, we can also reference properties using array syntax:

myObject['shoeSize']=”12″;

This notation is clumsy for ordinary use but has the advantage that the array index is a JavaScript expression, offering a form of runtime reflection.

We can also add a new function to our object dynamically:

myObject.speakYourShoeSize=function(){

alert("shoe size : "+this.shoeSize);

}

Or borrow a predefined function:

function sayHello(){

alert('hello, my shoeSize is '+this.shoeSize);

}

...

myObject.sayHello=sayHello;

Note that in assigning the predefined function, we omit the parentheses. If we were to write

myObject.sayHello=sayHello();

then we would execute the sayHello function and assign the return value, in this case null, to the sayHello property of myObject.

We can attach objects to other objects in order to build up complex data models and so on:

var myLibrary=new Object();

myLibrary.books=new Array();

myLibrary.books[0]=new Object();

myLibrary.books[0].title="Turnip Cultivation through the Ages";

myLibrary.books[0].authors=new Array();

var jim=new Object();

jim.name="Jim Brown";

jim.age=9;

myLibrary.books[0].authors[0]=jim;

This can quickly become tedious (often the case where turnips are involved, I’m afraid), and JavaScript offers a compact notation that we can use to assemble object graphs more quickly, known as JSON. Have a look at it now.

Making classes

JavaScript has a concept of objects and classes but no built-in concept of inheritance. In fact, every JavaScript object is really an instance of the same base class, a class that is capable of binding member fields and functions to itself at runtime.

In JavaScript, then, we can write something that looks similar to the Java declaration

var myObj=new MyObject();

but we do not define a class MyObject, but rather a function with the same name. Here is a simple constructor:

function MyObject(name,size){

this.name=name;

this.size=size;

}

We can subsequently invoke it as follows:

var myObj=new MyObject("tiddles","7.5 meters");

alert("size of "+myObj.name+" is "+myObj.size);

One common idiom is to declare the function inside the constructor:

function MyObject(name,size){

this.name=name;

this.size=size;

this.tellSize=function(){

alert("size of "+this.name+" is "+this.size);

}

}

var myObj=new Object("tiddles","7.5 meters");

myObj.tellSize();

This works, but is less than ideal in two respects. First, for every instance of MyObject that we create, we create a new function. As responsible Ajax programmers, memory leaks are never far from our minds, and if we plan on creating many such objects, we should certainly avoid this idiom.

A prototype is a property of JavaScript objects, for which no real equivalent exists in OO languages. Functions and properties can be associated with a constructor’s prototype. The prototype and new keyword will then work together, and, when a function is invoked by new, all properties and methods of the prototype for the function are attached to the resulting object. That sounds a bit strange, but it’s simple enough in action:

function MyObject(name,size){

this.name=name;

this.size=size;

}

MyObject.prototype.tellSize=function(){

alert("size of "+this.name+" is "+this.size);

}

var myObj=new MyObject("tiddles","7.5 meters");

myObj.tellSize();

First, we declare the constructor as before, and then we add functions to the prototype. When we create an instance of the object, the function is attached. The keyword this resolves to the object instance at runtime, and all is well.

Note the ordering of events here. We can refer to the prototype only after the constructor function is declared, and objects will inherit from the prototype only what has already been added to it before the constructor is invoked. The prototype can be altered between invocations to the constructor, and we can attach anything to the prototype, not just a function:

MyObject.prototype.color="red";

var obj1=new MyObject();

MyObject.prototype.color="blue";

MyObject.prototype.soundEffect="boOOOoing!!";

var obj2=new MyObject();

obj1 will be red, with no sound effect, and obj2 will be blue with an annoyingly cheerful sound effect! There is generally little value in altering prototypes on the fly in this way. It’s useful to know that such things can happen, but using the prototype to define class-like behavior for JavaScript objects is the safe and sure route.

More about declaring Class with prototype

Interestingly, the prototype of certain built-in classes (that is, those implemented by the browser and exposed through JavaScript, also known as host objects) can be extended, too. Let’s have a look at how that works now.

Extending built-in classes

Within the web browser, DOM nodes cannot be extended in the Internet Explorer browser, but other core classes work across all major browsers. Let’s take the Array class as an example and define a few useful helper functions:

Array.prototype.indexOf=function(obj){

var result=-1;

for (var i=0;i< this.length;i++){

if (this[i]==obj){

result=i;

break;

}

}

return result;

}

This provides an extra function to the Array object that returns the numerical index of an object in a given array, or -1 if the array doesn’t contain the object. We can build on this further, writing a convenience method to check whether an array contains an object:

Array.prototype.contains=function(obj){

return (this.indexOf(obj)>=0);

}

and then add another function for appending new members after optionally checking for duplicates:

Array.prototype.append=function(obj,nodup){

if (!(nodup && this.contains(obj))){

this[this.length]=obj;

}

}

Any Array objects created after the declaration of these functions, whether by the new operator or as part of a JSON expression, will be able to use these functions:

var numbers=[1,2,3,4,5];

var got8=numbers.contains(8);

numbers.append("cheese",true);

Reflecting on JavaScript objects

In the normal course of writing code, the programmer has a clear understanding of how the objects he is dealing with are composed, that is, what their properties and methods do. In some cases, though, we need to be able to deal with completely unknown objects and discover the nature of their properties and methods before dealing with them. For example, if we are writing a logging or debugging system, we may be required to handle arbitrary objects dumped on us from the outside world. This discovery process is known as reflection, and it should be familiar to most Java and .NET programmers.

If we want to find out whether a JavaScript object supports a certain property or method, we can simply test for it:

if (MyObject.someProperty){

...

}

This will fail, however, if MyObject.someProperty has been assigned the boolean value false, or a numerical 0, or the special value null. A more rigorous test would be to write

if (typeof(MyObject.someProperty) != “undefined”){

If we are concerned about the type of the property, we can also use the instanceof operator. This recognizes a few basic built-in types:

if (myObj instanceof Array){

...

}else if (myObj instanceof Object){

...

}

as well as any class definitions that we define ourselves through constructors:

if (myObj instanceof MyObject){

...

}

If you do like using instanceof to test for custom classes, be aware of a couple of “gotchas.” First, JSON doesn’t support it-anything created with JSON is either a JavaScript Object or an Array. Second, built-in objects do support inheritance among themselves. Function and Array, for example, both inherit from Object, so the order of testing matters. If we write

function testType(myObj){

if (myObj instanceof Array){

alert("it's an array");

}else if (myObj instanceof Object){

alert("it's an object");

}

}

testType([1,2,3,4]);

and pass an Array through the code, we will be told-correctly-that we have an Array. If, on the other hand, we write

function testType(myObj){

if (myObj instanceof Object){

alert("it's an object");

}else if (myObj instanceof Array){

alert("it's an array");

}

}

testType([1,2,3,4]);

then we will be told that we have an Object, which is also technically correct but probably not what we intended.

Finally, there are times when we may want to exhaustively discover all of an object’s properties and functions. We can do this using the simple for loop:

function MyObject(){

this.color='red';

this.flavor='strawberry';

this.azimuth='45 degrees';

this.favoriteDog='collie';

}

var myObj=new MyObject();

var debug="discovering...\n";

for (var i in myObj){

debug+=i+" -> "+myObj[i]+"\n";

}

alert(debug);

This loop will execute four times, returning all the values set in the constructor. The for loop syntax works on built-in objects, too-the simple debug loop above produces very big alert boxes when pointed at DOM nodes!

Using JSON

The JavaScript Object Notation (JSON) is a core feature of the language. It provides a concise mechanism for creating arrays and object graphs. In order to understand JSON, we need to know how JavaScript arrays work, so let’s cover the basics of them first.

JavaScript has a built-in Array class that can be instantiated using the new keyword:

myLibrary.books=new Array();

Arrays can have values assigned to them by number, much like a conventional C or Java array:

myLibrary.books[4]=somePredefinedBook;

Or they can be associated with a key value, like a Java Map or Python Dictionary, or, indeed, any JavaScript Object:

myLibrary.books["BestSeller"]=somePredefinedBook;

This syntax is good for fine-tuning, but building a large array or object in the first place can be tedious. The shorthand for creating a numerically indexed array is to use square braces, with the entries being written as a comma-separated list of values, thus:

myLibrary.books=[predefinedBook1,predefinedBook2,predefinedBook3];

And to build a JavaScript Object, we use curly braces, with each value written as a key:value pair:

myLibrary.books={

bestSeller : predefinedBook1,

cookbook : predefinedBook2,

spaceFiller : predefinedBook3

};

In both notations, extra white space is ignored, allowing us to pretty-print for clarity. Keys can also have spaces in them, and can be quoted in the JSON notation, for example:

“Best Seller” : predefinedBook1,

We can nest JSON notations to create one-line definitions of complex object hierarchies (albeit rather a long line):

var myLibrary={

location : "my house",

keywords : [ "root vegetables", "turnip", "tedium" ],

books: [

{

title : "Turnip Cultivation through the Ages",

authors : [

{ name: "Jim Brown", age: 9 },

{ name: "Dick Turnip", age: 312 }

],

publicationDate : "long ago"

},

{

title : "Turnip Cultivation through the Ages, vol. 2",

authors : [

{ name: "Jim Brown", age: 35 }

],

publicationDate : new Date(1605,11,05)

}

]

};

Sharp-eyed readers will have noted that we populated the publication date for the second book using a JavaScript Date object. In assigning the value we can use any JavaScript code, in fact, even a function that we defined ourselves:

function gunpowderPlot(){

return new Date(1605,11,05);

}

var volNum=2;

var turnipVol2={

title : "Turnip Cultivation through the Ages, vol. "+volNum,

authors : [

{ name: "Jim Brown", age: 35 }

],

publicationDate : gunpowderPlot()

}

We can also define member functions for our JSON-invoked objects, which can be invoked later by the object:

var turnipVol2={

title : "Turnip Cultivation through the Ages, vol. "+volNum,

authors : [

{ name: "Jim Brown", age: 35 }

],

publicationDate : gunpowderPlot()

},

summarize:function(len){

if (!len){ len=7; }

var summary=this.title+" by " + this.authors[0].name +" and his cronies is very boring. Z";

for (var i=0;i< len;i++){

summary+="z";

}

alert(summary);

}

};

...

turnipVol2.summarize(6);

The summarize() function has all the features of a standard JavaScript function, such as parameters and a context object identified by the keyword this. Indeed, once the object is created, it is just another JavaScript object, and we can mix and match the JavaScript and JSON notations as we please. We can use JavaScript to fine-tune an object declared in JSON:

var numbers={ one:1, two:2, three:3 };

numbers.five=5;

We initially define an object using JSON syntax and then add to it using plain JavaScript. Equally, we can extend our JavaScript-created objects using JSON:

var cookbook=new Object();

cookbook.pageCount=321;

cookbook.author={

firstName: "Harry",

secondName: "Christmas",

birthdate: new Date(1900,2,29),

interests: ["cheese","whistling","history of lighthouse keeping"]

};

With the built-in JavaScript Object and Array classes and the JSON notation, we can build object hierarchies as complicated as we like, and we could get by with nothing else. JavaScript also offers a means for creating objects that provides a comforting resemblance to class definitions for OO programmers, so let’s look at this next and see what it can offer us.