An emberjs enthusiast, equally fascinated by laravel's clever but unorthodox use of fascades. Lamin Sanneh is a front end web developer who loves to dive into pretty much every thing web related. He teaches on youtube and you can also find him talking about web stuff here to anyone who would listen.

Lamin's articles

  1. Dependency Injection: Angular vs. RequireJS

    If you have built large JavaScript applications before, chances are, you have faced the task of managing component dependencies. You can think of a component as a block of functionality. It may be a function, object, or an instance. The block chooses to expose one or more public methods. It may also choose to hide non-public functionality. In this article, we will look at two major libraries, AngularJS and RequireJS. We will analyse how they use dependency injection to share components across an application.

    Short Story on Dependency Injection

    Dependency injection becomes a necessity when you need an easy way to pull in one or more components into an application. For example, assume you have two components named database and logger. Assuming that the database component exposes the methods getAll, findById, create, update, and delete. The logger component only has one method, saveNewLog, in it’s public API. Let’s assume the logger component depends on the database component to function. Using dependency injection, we could pass in the database component as a dependency to the logger component during creation.

    Just so you can visualize the dependencies better, I’ll write it in code. Note that the actual syntax depends on the dependency injection library you use. Angular and RequireJS have different syntax, so the code below is a generic example and we’ll get to actual representations of the two libraries in a bit.

    Here is the database API:

    [js]
    function database() {
    var publicApis = {
    getAll: function() {},
    findById: function(id) {},
    create: function(newObject) {},
    update: function(id, objectProperties) {},
    delete: function(id) {}
    };

    return publicApis;
    }
    [/js]

    And, here is the logger API:

    [js]
    function logger(database) {
    var publicApis = {
    saveNewLog: function() {}
    };

    return publicApis;
    }
    [/js]

    As you can see, we are passing the database component into the constructor of the logger. The part of the application which handles the instantiation of the logger must provide it with an instance of a database component.

    The Need for Dependency Injection

    Now that we are more educated about what dependency injection is, let’s identify what benefits it brings to the table. If you are an advocate of good JavaScript design, some benefits of dependency injection may be obvious to you. If they’re not, let me explain a few of the general benefits. I believe these apply across the board whether you use AngularJS or RequireJS.

    Testing Becomes a Breeze

    Testing becomes much easier because you can provide mocked dependencies instead of real implementations.

    Separation of Concerns

    Dependency injection lets you separate the parts of your application so that each one handles a distinct job. In the above example, the database module is only concerned with dealing with a database. The logger module is only responsible for logging data, whether it is in a database, file, or the console. The benefit of this is easier swapping of dependencies. If we later decide that we need to use a file-based database instead of a traditional relational database, we just have to pass in a different module. This module just has to exposes the same API methods as the database module, and the logger module would continue to work properly.

  2. Improving Your Ember.js Workflow Using Gulp.js

    I am a big advocate of the Ember.js framework. I have seen a lot of Ember tutorials on the web, but most do not explain how to setup a build system to use with it. In light of that, I have decided to take it upon myself to explain that part of the worflow. Since its arrival, Gulp.js has become a hot topic in the discussion of JavaScript task runners. It is no coincidence that Gulp.js pops up in the discussion when a JavaScript project is mentioned. So, this article is going to show how Gulp can be used with Ember projects.

    I will be making some assumptions in this article. I assume that you already have a basic understanding of how Gulp.js works and that you have setup a Gulp.js project on your own before. If not, please visit SitePoint’s Introduction to Gulp.js for a refresher. The rest of this article will teach you how to create and configure common Gulp.js tasks with your Ember project.

    A Typical Ember.js Workflow

    I have worked on several Ember.js projects and I noticed that there are common requirements among them. These requirements involve the need to manipulate SCSS, CSS, JavaScript, and Handlebars code. Below are the requirements and a brief explanation of each.

    SCSS Compilation

    This involves the conversion of SCSS code into CSS.

    JavaScript and CSS Minification

    Minification is the process of reducing the size of a file by removing unnecessary white space. With CSS, this is usually done after converting SCSS code to CSS.

    JavaScript and CSS Concatenation

    Concatenation is the process of combining many files into one file. This is usually done to reduce the number of HTTP requests to a server. More files means more HTTP requests, which leads to longer download times. When concatenated, you need just one HTTP request. This is especially useful when serving files over a slow network connection, such as a mobile device.

    File/Folder Watching

    Tasks like minification, concatenation, and compilation can run be manually. However, they are repetitive tasks that quickly become tiresome and boring. Using the Gulp.js watcher task, you can setup a file watcher to watch your desired files for changes. When it detects a change, it will run one or more tasks in response to that change.

    Handlebars Compilation

    Handlebars is the default templating language of Ember.js. However, browsers cannot parse Handlebars code. Therefore, we need a way to convert Handlebars code to HTML. That’s where Handlebars compilation comes into action. First, the Handlebars code gets converted into a JavaScript function. Then, the function gets run when required by the Ember runtime to append the proper HTML to the DOM.

  3. Fixture Adapters – Ember.js With No Server

    JavaScript MVC frameworks have become a popular choice for many frontend web developers today. Most of the time though, you will find that your application needs to communicate with some backend web service. Frequent calls to this service can slow down your development time. This can be frustrating, especially if you rely on a third party service which you have no control over.

    To get around this issue Ember.js provides a useful feature called fixture adapters. Fixture adapters allow you to mock any possible calls to a server with locally stored dummy data. Once development is complete, you can swap out the fixtures, enabling your application to make calls to a server for real data. In this tutorial, we will be building a sample blog application that shows off Ember’s fixture adapters.

    Introduction

    Our blog application will have several screens. There will be a home page to list the posts, and another for viewing individual posts. Now that we know what we’re building, let’s get to it.

    The index.html File

    Create an index.html file in the root of your application and add the following code. This is a simple skeleton that includes Ember.js and its dependencies, Handlebars and jQuery.

    [html]
    < !DOCTYPE html>





    Welcome to our Ember.js blog



    [/html]

    Bootstrapping the Application

    Create a new main.js file and paste the following code into it. This bootstraps a new instance of an Ember.js application and defines two routes for you.

    [js]
    App = Ember.Application.create();

    App.Router.map(function() {
    this.resource(‘articles’, { path: ‘articles’ }, function() {
    this.route(‘article’, { path: ‘/:article_id’ });
    });
    });
    [/js]

    List Articles on the Home Page

    Next, we need to list our articles on the home page. To do that, complete the following steps.

    Redirect to the Article Listing

    To make sure that the articles appear on the home page, paste the following code inside your main.js file. This creates an index route and makes sure that anytime the home page is visited, the user is automatically redirected to the articles page.

    [js]
    App.IndexRoute = Ember.Route.extend({
    redirect: function() {
    this.transitionTo(‘articles’);
    }
    });
    [/js]

    Create the Article Listing Route

    Next, create the article listing route and provide some data for it. Paste this code inside the main.js file. The interesting part of this route is that we are returning a simple JavaScript array of articles as the model for the route.