Sponsored

Monday, January 11, 2016

Flux - React - JavaScript




Do take a moment to go through the video above, this was during the last Facebook conference, F8. In it, it reveals their thinking and their strategy to solve one of the many problems of today's challenging data-driven application, be it web, app or both together. When I first found out what Facebook is up to, I started to go through their documentation, tutorials and workable examples posted on their site. I quickly love the way the have planned and executed for ReactJS! It was simply brilliant. Not even backbone, AngularJS or even my favourite Dojotoolkits come close to what these guys have been up to!

The simple one way, unidirectional flow of data just make sense on so many levels. It makes the code easier to read and understand even though it may be huge in size and functionalities. This is especially true if you are going to maintain somebody else's work. The code itself, the pattern is enough for you to get started.

One of the first few digital campaign that I use ReactJS is Johnson & Johnson's Baby of the Year.


J&J BOTY 2015 requires us to develop a web app that let their user complete one of a kind movie inspired poster. I was able to pull this off quite successfully thanks to previous work for Nestle's online form that require us to develop a form that can be printed out with their offline brochure! Who would have thought that client wants to maintain the same look and feel while having their user filled up the form, print it and send to the fulfilment team?

Honestly, it would be difficult if not for the Nestle's campaign.


But the first campaign I used ReactJS with Flux entirely is Pedigree Dentastix.



Pedigree campaign provided me with one of the most challenging task to complete. A fully responsive, image combinator using template smile overlapping over users' submitted dog image. The result, I must add, it quite stunning. Given the problem that the campaign itself presents. Which is I have to make sure the logic of scaling, rotating, translating, inverting, as well as keeping in mind the different pixel density of each devices! It was madness when I was first briefed! Imagine the number of ways this could go wrong, and my experiences tell me that if things can go wrong, it will go wrong!

However, I was proven wrong on this.

I managed to pull this off, only to have some data corruption on image transfer from device to server because some device has slow internet connection and timeout happens too fast for those users. Otherwise, I think it was quite a successfully web app that I did in a long time. For those of you canine lovers, who had been watching Dentastix very closely, you might had added your beloved canine with one of our smiling face template.

I managed to pull this campaign off within the work of around 2-3 weeks, all these thanks to the simple and good execution of ReactJS coupled with Flux. I was able to always focus on solving my problem bit by bit while never have to focus on how I should manage those data flow in the web app.

And at that time, ReactJS can still be compiled using browserify and uglify, and now it even supports ES6. And of course, we need to use Babel for that purpose, of compiling our code for older browser's consumption. But web development is moving lightning fast, and there are quite a number of frameworks and toolkits out there that had taken notice of ReactJS and its simpler way of data flow logic, and they began to roll out interpretation or should we put it, flavours of their own.

Saturday, December 19, 2015

OctoberCMS - Made with Laravel

OctoberCMS



Whether you are a seasoned PHP developer or someone who is looking for a good Laravel based CMS, this will certainly bring smiles to your face. Don't take my word for it. Please go ahead a try to install on your server to give a go.

composer create-project october/october myoctober dev-master

Go ahead to use composer to create a new OctoberCMS project, the setup is usually done within 10 minutes depending on your server's connections.

Codeigniter, why I wanted more?

I had been using Codeigniter for a good part of my work, it's a solid PHP framework, but at some point in time after having to dealt with the amount of work it takes to develop multi-table models that are relatable to each other, the 1-1, 1-n and n-n relationship thing. CI didn't fare that well in that department. CI is good on getting simple website up and running and that's it. If you want more, like maintainable site for less technical people, it falls really far behind.

I have been able to churn out a good amount of Facebook apps, microsite, campaign website with CI, but when it comes to administration. There isn't a good plugins or there is a shortcut to do it. You will have to know your way around CI to make a good CMS out of it, which it takes time and that's bad if each project requires just a little different from the previous one. It slowly corrodes my time away as I was just doing the redundant work on admin module!

Not a good way to do business, there must be another way, at least I thought.

I tried Expression engine, at least that's the closest to what I have been working on, so I thought it might fit my case well, but after using it for a project. It falls short. To me, it's just another CI behind, with a lot of conventions and configuration to mess around. It didn't take me long before I look for another CMS framework that is based on good solid PHP framework.

I found Laravel

Laravel, a PHP framework designed for PHP Artisan. Ever heard of CLI, or Command Line Interface? The installation command up there is an example of CLI, meant for power user who just likes to get things done without any other form of GUI, ain't nobody got time to develop GUI for web development that tend to expire every few months! Web development and technologies move too fast!

In short, Laravel is cool. It's simple and nice. Though there are learning curves, but any seasoned developer should be able to get their head on how Laravel works. Laravel is a well thought out PHP framework that uses solid framework like Symfony that has proven its reliability when it comes to production.

It even has its own CLI tool for us to use!



Instead of creating those boilerplate file from scratch or search online for the boilerplate and copy them to your files, you can just run the command and those file will be filled with all the required code. What a way to start!

Naturally, I used Laravel for my next project. It was a pleasant experience, knowing that I could do so much more with so little code relative to Codeigniter. I didn't regret all the sweat for learning Laravel, at all. Though I admit I did lose quite a fair bit of hair due to new concepts and terms introduced by Laravel. Like Service Container, IoC, what the heck is that? Middleware, what? And my personal favourite, Facade! I didn't initially know how to pronounce, I thought it sounded like, Fuck-cake. Seriously, why do we need all of those things?

It took me a good 2 weeks to finally understand how to use Laravel properly, although I don't understand most of how it works, but I get a site up and running within budget, within deadline. Which is a good thing. And soon, I came to love how Laravel make things work. and I subscribed and gave my support to Laracasts.com. The author is a talented developer and teacher, you just know what to do next after learning from him. He explained, in details, in hindsight, in theory so precise that you don't need another source of tutorial. Please give this man a well-deserved applause and treat him coffee every month to keep this work going forward!

After a while, the same problem comes to back to me. I was more efficient on Laravel than on Codeigniter. I work faster than before. But there isn't a good CMS that I can use on Laravel, unless of course, I made one. Which I think, I better give Google a try, to see whether they are some good folks out there whom are having the same problem as I was.

And I found October CMS

What a pleasant surprise!
As it turns out, it fulfils all of my criteria for a good developer PHP CMS framework. Solid documentation, good history of commits in GIT, followers and comments on their forum, built with Laravel 5.0.

I was sold.

The first project that I used October CMS is BMW microsite.


I found the process very efficient and pleasant. The idea of plugins, page components straight away make sense to me. One of my most favourited feature about OctoberCMS is page component.


If you have developed in CQ5, by Adobe. You would have similar experience on component-based workflow. The very idea behind OctoberCMS, is that it can be developed for custom implementation or complex code behind the scene, and in the same time, maintained by non-technical person!

So, within October CMS's admin module, there is a module called CMS, which allows user to add pages, adjust layout and also adding in lots of smaller chunks of content, or snippets.

But what if user wants to add a shopping cart module to a CMS page, how do we do that? Will this non-technical person mess up the page with wrong code? How can this work?

That's where Page components comes in, it's a drag and drop feature that allows non-technical person to drag to their desired page in the CMS and it will just work!

On the developers' end, you just have to make sure you do all your work nicely and you can safely leave the maintenance to your non-technical co-workers.

I have even developed a Flux-based React page component for my own use, so that I can define as many react projects within my CMS and just use dropdown to choose which React project will go into which page. A double win-win!

And one of the best things about OctoberCMS is that, you don't have to follow a certain ways to do things. You just need to follow the configuration, that's all. The rest of the coding and how to structure your files, it's all up to you.

In short, OctoberCMS, is very powerful as it's very flexible. And easy to maintain by non-technical person. And I can port my plugin from one OctoberCMS project to another, by just copying those files to the plugins folder, and do the artisan command line and voila, reusable code.

Give it a try, you will love it!


Friday, June 12, 2015

Dojoapp with Codeigniter, Isuzu Malaysia

In continuation of my progress of developing and utilising Dojoapp, may I also introduce to you, Isuzu Malaysia. This project took us a good few months from inception to completion, and now live.

Some of the stuff I brought over from CakePHP is Layout, which is so uber important, but CI's team chose to not include even a simple library for layout. Here is my implementation of layout for Codeigniter. Which has worked so far for me in multiple projects since its inception.

Layout for CI


<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');

class Layout
{
    public $data = array();
    public $external_data = array();
    public $view = null;
    public $viewFolder = null;
    public $layoutsFodler = 'layouts';
    public $layout = 'default';
    public $page = 'pages/absolute/sample';
    var $obj;

    function __construct()
    {
        $this->obj =& get_instance();
        $CI =& get_instance();
        
        $CI->load->driver('cache', array('adapter' => 'apc', 'backup' => 'file'));
    }

    function setLayout($layout)
    {
        $this->layout = $layout;
    }
    
    function setLayoutFolder($layoutFolder)
    {
        $this->layoutsFodler = $layoutFolder;
    }
    
    function setPage($page){
     $this->page = $page;
    }
    
    function setData($data){
     $this->data = $data;
    }
    
    function setExternalData($external_data){
     $this->data["external"] = $external_data;
    }

    function render()
    {
     $CI =& get_instance();
    
  $this->data["base_url"] = base_url();
        $this->data["site_url"] = site_url();
        $this->data["asset_url"] = base_url()."public_assets/";
        $this->data["resizer_url"] = base_url()."public_assets/resizer/image.php";
  $this->data["fb_app_id"] = $CI->config->item('fb_app_id');
  
        $controller = $this->obj->router->fetch_class();
        $method = $this->obj->router->fetch_method();
        $viewFolder = !($this->viewFolder) ? 'pages/'.$controller : $this->viewFolder . 'views';
        $view = !($this->view) ? $method : $this->view;
  
        $loadedData = array();
        $loadedData['view'] = $viewFolder.'/'.$view;
  
        $loadedData['data'] = $this->data;
        
        if(isset($this->page)){
         $loadedData['view'] = $this->page;
        }

        $layoutPath = '/'.$this->layoutsFodler.'/'.$this->layout;
        $this->obj->load->view($layoutPath, $loadedData);
    }
}
?>

Notice I use loaded cache driver in the construction function, that's because I wanted the page to load faster the next time another user access the same page. This will reduce the load on my database server, which gets hit often for complex MySQL action! The above is just the library for layout, the view file for the layout however, is as below.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
  
  <?php $this->load->view("elements/meta",$data); ?>
  <?php $this->load->view("elements/ga",$data); ?>
  <?php $this->load->view("elements/basecss",$data); ?>
  
  <?php $this->load->view("elements/javascript",$data); ?>
  
  <title>Isuzu Malaysia</title>
    </head>
    <body>
  <?php $this->load->view("elements/nav",$data); ?>
  <div class="mh600">
   <?php $this->load->view($view,$data); ?>
   
   <?php
    /*
                                //This is to temporarily disable the cache
                                $key = urlencode($_SERVER["REQUEST_URI"]);
    if(!$cache=$this->cache->get($key))
    {
     $cache = $this->load->view($view,$data, TRUE);
     $this->cache->save($key, $cache, 24*60*60);
    }
    
    echo($cache);
                                */
   ?>
  </div>
  <?php $this->load->view("elements/footer",$data); ?>
  
  <?php $this->load->view("elements/crazyegg",$data); ?>
    </body>
</html>

Passing data from Controller, via Layout to final view page

One of the hassles I encountered during development of this Layout library, is that I needed to pass data from Controller, to my view page, all the way through the Layout. And I needed a way to do that. My solution to that, is simply create another variable that can be set in the controller, then by exposing the variable to the view page through the Layout library, those data can arrive there safely!

Check out the "external data", that's where I pass the data in and use on the other side.

Wednesday, May 13, 2015

Browserify. Good News for NPM Wizards

Browserify.org

Before I begin, let's answer a few crucial questions.

What's Browserify?
Hint: take a good visit for their website.
Hmm.. Ok, my bad. may be the tagline for browserify on their website isn't really helping at first glance, but bear with me. It blew my mind and changed how I tackle public dependencies, private packages and my general workflow right after I dived deep into using it in one of my recent projects.

Browserify.org

I have an affair, with NodeJS

I have to admit, despite my love for Dojotoolkit. This is far more promising that it offers a few of the essentials that I found critical if you intend to bring your skill set up another level. But I will leave this part till the end of this article.

Let's now focus on what is Browserify?

My take on the explanation is this: It lets you code in very modular fashion and yet when you want to view it in browser, it can bundle/compile all of the dependencies that you are using into a single file. 

Neat.

I was looking for similar workable solution for Dojotoolkit, unfortunately I don't think Dojotoolkit offers anything remotely close to this. Yes, it's modular, but it also means that the amount of files the browser needs to download also increases with the amount of modules I have. Which doesn't sound that bad, but if I can have a cleaner solution, fire it up I say.
Since Browserify depends very much on the community of NPMJS and the like to thrive, it will continue to get better as time goes by as developers are now realising that NodeJS is now recognised as enterprise class. As demonstrated by the guys from Walmart Lab. These guys are awesome, what they did at Walmart is that they created external modules using NodeJS to extend the legacy systems in Walmart with minimum impact. Walmart isn't your neighbourhood small time shop that only have few customers. And by using this new technology instead of relying on Java with IBM enterprise solutions or ASP.NET with Microsoft. These guys proved that for mission critical stuff, NodeJS is up to the task.

But, what does NodeJS and Browserify has in common?

Developers whom have started using Javascript may find it dreadful to go into another language such as PHP, ASP.NET, JSP you name it. But sometimes, and most of the time, developers need to cover from end to end and that means more language mastery is needed.

With NodeJS, developers can use their fluency in JavaScript to develop a backend that can act as some kind of CMS, or data retrieval from MySQL or MongoDB or even developing a realtime backend for interactive games! All this are made possible with NodeJS, it's using good ol JavaScript.

Browserify is like a nasi lemak bungkus

With Browserify, you can start all the way to architect your code with NodeJS's CommonJS modular style in mind and your code will still work in browsers! Isn't that neat? You will have the benefits of modular architecture that is easy to consume, easy to maintain and yes, easy to scale.

And let's not forget the awesome communities at NPMJS. The sheer amount of resources available for you to use is immense, a lot of the stuff that I always find trouble developing my own code for, I can always count that there is already a package that will solve my problem there.

NPM, Awesome Stuff

With NPM, you will be encouraged to best practices in dependencies management. You will create your own package.json that you can install all of your project's dependencies with single command of 


npm install

Nothing could be simpler than that, you just need to specify the version you needed for each dependencies that NPM will resolves all that and download automatically for you.


For example: package.son for one of my projects
{
  "name": "Chat.react!",
  "version": "0.0.1",
  "description": "Chat with React and browserify!",
  "main": "public/js/app.js",
  "dependencies": {
    "flux": "^2.0.0",
    "react": "^0.12.0",
    "underscore": "^1.7.0",
    "jquery":"^1.0.0",
    "bootstrap":"^3.0.0",
    "localStorage":"^1.0.0",
    "express": "4.10.2",
    "socket.io": "1.2.0",
    "socket.io-client":"1.3.5"
  },
  "devDependencies": {
    "browserify": "~6.2.0",
    "envify": "~3.0.0",
    "reactify": "^0.15",
    "watchify": "~2.1.0",
    "jest-cli": "~0.4.0"
  },
  "scripts": {
    "start": "watchify -o public/js/bundle.js -v -d .",
    "build": "browserify . | uglifyjs -cm > public/js/bundle.min.js",
    "test": "jest"
  },
  "author": "Shoguniphicus",
  "browserify": {
    "transform": [
      "reactify",
      "envify"
    ]
  }
}

You may want to learn a bit more about package.json, but take it at your own pace!

After the dependencies are downloaded into node_modules folders, you can go ahead and start the processing process that we can use watchify to automagically resolves and bundle up our codes into one nice JavaScript file


npm start

If you are wondering what's flux, react and socket.io and socket.io-client in the dependencies in my package.json. Feel free to check them out in their respective links. I should reserves this topic of using Browserify with Flux, ReactJS and also Socket.IO in my next articles. It's amazing how all these different parts play so well together to give us a whole new perspective on developing a webapp, or a website.

First Flux Project

Check this project out!

Tuesday, May 5, 2015

Dojoapp - Built from Dojotoolkit

For the past year or so, I have been working with Dojotoolkits for the most of my time, building several hybrid apps and website using it as a core. And also have been upgrading and cleaning up the little framework I called Dojoapp. (Not yet perfect, but it's already production ready!) Below is the short list of the projects that I have been able to complete last few months.


Yasmin - Howyouknow

This is my first web project using JavaScript with Dojotoolkit! The main challenge at that time was that I needed to animate those individual block of images in a direction with different top offset. At that time, the requirement was that, this page should also be playable in mobile devices! Madness!

What I did, was taking what I have learnt from AS3 (Flash, which was my bread and butter at that time), and apply it to accomplish what this site requires. The results, was simply amazing DIV-based animation that will work across major type of browsers, it even play nicely in IE6! Anyway, looking in hindsight, I realised that if I had known about HTML canvas, it would be far smoother and far better!. Still, the virgin JS project with Dojotoolkits.


Samsung Galaxy Wonderland

This, is the second project using Dojotoolkit, and even then, I hadn't any idea how to structure the front end of the site. I still remember at that time, I knew I needed a much more structured approach towards solving common web project problems. And I needed to form my own framework on top of Dojotoolkits (In case, you missed my previous article about why I chose Dojotoolkit and not AngularJS, Backbone and etc, go here.),

 photo ScreenShot2012-12-16at104739AM.png


Malaysia.my
Malaysia.my is my first attempt to make sense of how to actually crafting a good controller with factory patterns and also the concept of blocks and widgets. The 0.01v was born with this web project. It's also the first time I used i18n in a site that's finally bigger on the backend than just the bloated frontend.


U-Mobile Buahtangan

Talking about HTML Canvas in my first project, this is my first HTML Canvas web project that features a good hexagonal style fullscreen layout.

If you missed my previous article about my usage of HTML Canvas, go here.



KFC Golden Drumstick
If you missed my previous article about the challenge of developing this mobile web game, and the usage of PhaserJS, check it out here.


Shuttlefly

Shuttlefly, is the first hybrid app built on top of the Dojoapp framework that I have created while working on many of my web projects. It has a matured factory pattern, a matured controller, Objective-C inspired Navigation controller that can accept stack push of views and animate to give you the feel of native application and many more. Truly, this is the beginning of Dojoapp, mobile version.

Offpeak


Offpeak.my inherits most of its architecture from my previous projects. This project is where I created more utilities classes than all of my projects combined. A single selection modal, multiple selection view controller and many more. Go ahead and download them, you could enjoy very handsome discount at restaurants around Klang Valley!


Connected Mum's Club


*Some of the images here are taken from the google image. If you find it offensive, I will take it down. Wanted a screenshot of my web project as I don't usually keep my work
screenshotted". Too much to take care. :)



Saturday, December 20, 2014

Dojoapp - My First Opensource Project

The Introduction

This is a boilerplate where I wrote for a lot of my projects, ranging from mobile app to website for the past few years. The base is Dojotoolkits, which provides a good place to start. You may wonder, of so many other framework out there. Why Dojotoolkits? Why not AngularJS among others. My answer to that, is simple. Dojotoolkit has one of the easiest to setup in terms of its widget.

When you read on almost all of the recommendation out there that promote JavaScript framework, you will never hear Dojo or Dojotoolkit despite it being one of the best and easiest framework to learn so far. You will wonder, why are there no attention given to Dojotoolkits? May be, just may be that there is no good tutorial out there that makes people want to learn something as comprehensive as Dojotoolkits. And may be, dojoboilerplate will change your perception. At least, that's what I hope it would do.

Missing AS3 or Objective-C?

If you come from Flash Action Script 3.0 or Objective-C, you may have trouble setting up a good Javascript architecture that make sense in the long run. You may end up in spaghetti code where there is no real good practice in place, and everything just works. But what if, what I have developed so far, enables you to develop a full stack application on JavaScript? And you can finally have a more managable separation of logics from backend to frontend. Finally, a frontend framework that make sense.

I myself, have been exploring different frontend JavaScript framework. Most are okay to a point. But most fail at one feature where I think is most important. The ability to gel a Javascript "Class" to a template. Imagine if you will, every single piece of views that you see on a website is made up of a lot of template pieces. They may be the whole page, may be just the form area, the news section or even the breadcrumb.

Traditionally, what I would do, is to generate the whole page in backend platform of my choice, it can be PHP, ASP.NET, JSP and now NodeJS or others. Then use spaghetti code or jQuery to tie them to a function when the document is finished loaded and ready. Not a big problem, as developers have been doing this for the past decades or so without blowing up the internet.


Why the change?

It's more scalable, legible and best of all, easy to learn and use.

Currently, there are a few banking apps that are in the development process using the framework that I have managed to put together. And I am naming it dojoboilerplate. Beside this, there are already an app out there in the app store that uses this framework, it's called Shuttlefly.

Malaysia.my & Yasmin's How You Know

When I was in Leo Burnett Malaysia, I was tasked to develop Malaysia.my's frontend. The initial objective was simple, to get the site out quickly, as soon as possible, because the client's previous vendor has failed them miserably and the site is taking forever to update and to refresh. So, by the time the brief reached my table, it was almost reaching the deadline. So, we had to find ways to make this work. And at that time, I had just started playing around Dojotoolkit, and had only completed 2 projects prior to this incoming task. The first one was Yasmin Ahmad's How You Know website that was aimed to promote the book, if you don't know who is Yasmin Ahmad, may be you have seen her very touching and down to earth Petronas festive TVC, her passing away was a great lost to the industry as much as to the society. Personally, haven't have the chance to work with her, but from her legacy, I can feel she touched lots of souls and are well missed.

Samsung Galaxy Wonderland

The second website developed on Dojotoolkits was Samsung Galaxy Note campaign, it's called Galaxy Wonderland. I had to admit, because I had just started familiarising with how to structure a good Javascript fronted, the site was bloated and loading slow. Which we later found out how to speed things up and also cut down on stuff that's slowing the site down. And the experience of developing these two sites had benefited me greatly as it provide me the necessary challenge in a real world problem where I need to give solution to.

Dojoboilerplate

The framework will be released in Github, it will take me few weeks to find time to tighten up few more loose screws before I think it's ready for the 0.1v alpha primetime! Due to my current extreme amount of workload in my new position as Tech lead in Next Digital, one can only expect to see 0.1v in late January 2015. Hopefully, by then the framework will be even more mature and I hope it will help more people out there who struggles to choose a good Javascript framework.

If you must, and you will, please checkout Malaysia.my if you want to have a taste of what my framework would do.

As of current, my task is to deliver Connected Mum's Club within these coming few weeks. Same old story, previous vendor screwed up the site so bad that makes updating and upgrading the site's content difficult, if not impossible. Till then, happy coding!