Monday, December 2, 2013


Enough with Javascript
for a bit, I might be losing some touch in PHP so I'm going Laravel this time around.

How I'm using Laravel

Currently I'm using Laravel framework on building a RESTFul API after jumping from many different frameworks such as Slim Framework and Frapi. And this might affect my writing of this article regarding Laravel since I may not include some templating topics and other frontend stuff that Laravel can do.

What is Laravel ?

Laravel is like any other PHP frameworks such as CakePHP, CodeIgniter and Zend Framework. Of course it has it's own strengths and weaknesses but I'm thinking not to add that since it's the developers duty to find out what is lacking for him/her.

Laravel is Composer Ready!

I asked one of my colleague who is claiming that he is a "PHP master" and he can code PHP even if he is blind-folded. And when I asked him if he is using Composer and Packagist he says he doesn't know about those (sad face). Well anyway, I'm not saying all PHP developer should know about Composer but it is good knowing that you doing it in your project and Laravel is very Composer ready.

Imagine you can build Laravel application within seconds without copying and pasting additional plugins and getting it from all over the web. You can do it by creating a simple configuration file in JSON format and include your code dependencies and required plugins, then Composer can collate and build an app for you.

If your familiar with Yeoman for Javascript application , Composer is for PHP application.

Routing and RESTFul Controller

Actually this is one my favorite feature of Laravel, its RESTFul Controller. Since I'm developing an API, Laravel's approach of Controller really gave ease of doing some work and understanding on how this great framework works. 

If you notice I didn't mention routing well this two comes along with each other if you want a controller you need a routing code to activate or access it.

It really depends on you on how to use this feature of Laravel for me I use those HTTP verbs for API operation like if GET then get data and POST if inserting. You can set a get Controller and just show an html or create a POST controller which handles form submits.

Next Part

I will be tackling some information for authentication for controller and database migration topics.


Saturday, September 21, 2013

It's been a hell of a week on our current development with Sencha EXTJs. So too calm me down, I started reading and reading again and this is where I bumped with JSDuck.

JSDuck is Sencha's very own documenting framework, and I think they did a very good job on this one.

Before everything else, why document?

I really don't have any plans or any user story of having a documentation from our development roadmap and when I found JSDuck and its awesomeness, for sure there will be a one or two user story that will focus on code documentation.

And to answer my own question:

  • If you can document your work then your are doing a good job
  • If you can detail every part of your class properties and methods then you really know what is really happening inside out
  • If you document, you will find that some of your code is good or bad. Then you can start having some todos and refactor your work.
  • New people on your project can easily start on your development team with your documentation

So why use JSDuck?

Let me first show you a common page from Sencha Extjs documentation.


You can check the live example here: Ext.Ajax documentation

If you wonder how can you make this kind of documentation well it is very easy. If you have been doing this stuff in your development: 

/**
* @class TestClass
* This is a test class only
* @property String A property string
* @author Ronald Allan Mojica
**/

Then the rest is easy.

Here is the list of things that I think why JSDuck rocks:

  • Cool interface
  • Built-in search engine all over your code
  • Easy to use with your current comment tags if you have it already
  • Cool sets of new tags like @example @video and @markdown
With JSDuck, it will provide you intuitive controls all over your code with the comment section you made with your code base.

Let's get started 

First let's get JSduck in your system, since JSDuck is Ruby gem you need to have at least the latest Ruby on your system, if not then install Ruby first and key in the following command:

$ sudo gem install jsduck

And then next step is to locate your code and let's start using JSDuck.

In your root folder of your application , start documenting with the following code:

$ jsduck [class folder] --output docs --title [Your App Name]

The output option is where your documentation will be generated and the title option is for your documentation title.

And that's it! After that you can open the index.html inside docs/ folder with your browser.

JSDuck references

For more information about JSDuck you can check out their official wiki which has lots of informative details on various comments syntax. Click here.

Example.js from SenchaLabs

At first I really don't know what syntax to use to generate a more informative Class documentation but this example.js from SenchaLabs really help. It has lots of samples regarding property, markdown and a lot more.

Monday, July 8, 2013

Going to Ext JS is like diving into a very deep ocean where you only have flippers. But don't worry, you will not be alone. I will be accompanying you through the whole process. And I don't want to warn your regarding Ext JS because this is a fun stuff to learn.

If you knew some Javascript then  we are good to go. If you knew Backbone.js leave it, if you knew KnockoutJS leave it also because it will be a different world for you now.

We will be entering the Sencha Ext JS world once you take the red pill.

Before anything else, I will give you some tiny introduction about EXT JS.

The Framework itself

Ext JS is said to be the best Javascript framework ever built, it's not free if you will be using it for your company sake but it is free on GPL license. But this should not stop you from learning the best Javascript framework.

Why not go with jQuery UI?

If you thought Ext JS is like another jQuery UI then you are wrong, Ext JS is not just UI, table and grid widgets because you will not be handling just the UI itself but the data behind it. 

With the widget offering from jQuery UI, you might jump to that bandwagon but how about integrating some Restful Api on it and manipulate the legendary DOM? Then that will be the start of your code horror. I've seen lots of application that fall from jQuery code conventions.

On guard!

Ext JS has a very steep learning curve but it doesn't mean that it not possible. Once you get familiar with this MVC framework you will be just like walking in the park.

Monday, June 17, 2013

JikamuJS is being develop using Coffeescript, and requires jQuery and jQuery.address for the URL Routing.

The main inspiration of this simple application is DavisJS which currently support HTML5 browsers. DavisJS is a router application that use HTML5 history.pushState.

With the help of jQuery.address url routing api, JikamuJS will target not only new browser but also older browsers(I'm talking to you Internet Explorer).

JikamuJS' Goal

JikamuJS was built with the help of great JS and Jquery plugins like jQuery Address and DavisJS.


So what's the puss with this very simple js app?

Well if your familiar with Backbone then go Backbone. JikamuJS is not built to replace those capable JS framework but this simple app is capable of building simple apps to a bigger one and it will support IE6 up to latest.

Requirements

JikamuJS requires jQuery 1.7.2+ and the latest jQuery Address. You can download the latest JikamuJS here at github.

Usage

Using JikamuJS is very simple , pull out the Route class and supply URL Path, Controller Before Load and After load callbacks.

Adding a new Route with your page

new Jikamu.Route()
    .urlpath('/blog')
    .page(
        {
            page_name: "Blog Page",
            controller: function(){
                $("#container").html('Blog Page');
            },
            before_load:function(){
                console.log('Before loading Blog page');
            },
            after_load:function(){
                console.log('After loading blog page');
            }
        }
    )
    .save();

Starting your App


new Jikamu();

Accessing URL parameters


Checkout jQuery Address API and references here http://www.asual.com/jquery/address/

Future Plans

Unit tests
Separate files and classes
Documentation
Add more features

Wednesday, June 5, 2013

So it is almost decided now, we are doing our back office application with ExtJS (Thanks to my colleague who suggested it). After doing some research, I found out that ExtJS is one hell of framework that will surely boost our development.

But the thing is we never encountered ExtJS on our development life cycle and good thing is we are capable JavaScript programmer.

Today I will be taking my first step on Sencha ExtJS and I hope it will be easy for me to comprehend everything but I know it will not be very easy because ExtJS has its own convention.

Goodluck for me... And expect a day to day blog and status of my ExtJS development.

First I want to scold myself, I should spend at least an hour to check out Coffeescript. I have been skipping articles regarding Coffeescript in NetTuts and missed ManilaJS session last few months ago where the speaker is the maker of Backbone.js and Coffeescript, the Jeremy Ashkenas.

After a week now, I'm happy to see myself improving a lot on Javascript with the help of Coffeescript. It is time consuming to describe each benefits of Coffeescript because this is so awesome in so many ways.

If ever you decided to spend at least 30 mins of your time with Coffeescript then it's a good choice.



Everything start in Coffeescript Official website

Visit the site! There's a console for you to try Coffeescript on your browser.

Semi-colons will miss our gentle touch

If your a Ruby person then you might find Javascript a bit tedious on adding semi colons on every command or line you made. But that's okay, I'm a PHP developer and I survived it.

In Coffeescript, the semi-colon button will miss our touch since most of the convention doesn't require it.

Fuck Global variables!

Messing up the global variables in Javascript is a pain in the ass and it will be real pain the ass for maintaining your code base. But don't worry we will still access or write global but it will be much safer and easier on Coffeescript.

A better OOP 

I'm not saying Javascript is not good language for OOP but with Coffeescript it will give us more understandable way of creating Class and instantiating it.

class Animal

The code above will create an class name Animal which can also be extended on this approach

class Dog extends Animal

I know this is a very short take on how awesome Coffeescript is but this pieces change how I wrote code on Javascript. On my experience, Javascript has a big chance of getting a spaghetti code if not careful watched but having a more readable code your colleague can easily dive in to your chocolate mud playground.

So try it!

Friday, May 17, 2013


If your in a situation that your tied up with your web project and you don't have enough time to dive to a new platform then it's okay. 

Mobile development is growing pretty fast since most of the internet users now are always on the go. Of course most of them has a smart phone on their pocket or in their sling bag, just turned on their mobile internet connection then that's it!

Again, if you want to dive in to this unknown platform it will be pain in the ass. Like me, I worked my entire life with PHP, MySQL , Javascript, HTML and CSS. I never had any training or proper education on learning IOS main programming language, Objective C.

Don't worry you can still be involved on mobile development with having enough Java or Objective C on your blood. With your existing knowledge of Javascript , HTML , CSS or even PHP you can get into mobile development.

Tighten the gap with PhoneGap

PhoneGap is one of the first thing I stumbled along with Appcelerator Titanium. 

So basically what is PhoneGap?

PhoneGap is an open-source mobile development framework developed by Nitobi Software. It enables software programmers to build applicatication for mobile devices using JavaScript, HTML5 and CSS3, instead of device-specific languages such as Objective-C.
There you have it, clearly in the last sentence you can be confident on taking this path. Having a good background on Javascript, HTML5 and CSS3 it will give you any buff to start with PhoneGap.

You can start with Android SDK for PhoneGap since you can run this from any OS then if your done you can port or make your base code to be compatible for other SDKs such as iOS.

One of the good feature of PhoneGap is that you can convert your Android base code in most mobile platfoms like Bada, Blackberry , WebOS, and for Windows phone.

Visit their official web page for startup guides , click here.

Bulletproof? Titanium... 

Like Phonegap, Appcelerator Titanium also give you ways to develop mobile application with your current HTML5, Javascript and CSS3 knowledge. This have been one of the most popular mobile application framework which doesn't require Objective C.

Titanium has lots of great features and native interactivity, also they offer their rich IDE which is based on Eclipse.

Unlike PhoneGap, Titanium supports iOS , Android and Blackberry SDKS which is for me is okay right now since IOS and Android is the top market to target if your looking for huge mobile user base.

If you don't have a Mac development tools at home you can start with Android then make it work or look lik iOS if your done working with Android.

Last words

Bump Appcelerator and Phonegap's official website and read their tutorials. It will be a good start on developing mobile applications.