Skip to main content

Posts

How to use the APP_INITIALIZER token to hook into the Angular bootstrap process

I've been building applications using Angular as a framework of choice for more than a year and this post is not about another React vs Angular or the quirks of each framework. Honestly, I like Angular and every day I discover something new which makes development easier and makes me look like a guy who built something very complex in a matter of hours which would've taken a long time to put the correct architecture in place if I had chosen a different framework. The first thing that I learned in Angular is the use of the APP_INITIALIZER token.

My third book titled — ‘React-Router Quick Start Guide’ published!

The title says it all. This is my third book with Packt Publishing and I wrote a book after four long years. In the last few months, I’ve spent my weekends writing this book and it was an arduous undertaking. Here’s the cover image: I have used React and React-Router in many projects and during the course of writing this book I’ve learned a great deal about these frameworks/libraries. This book is all about the ‘React-Router’ library and how you can use it any React application (web or native). The book covers the following topics: Chapter 1, Introduction to React Router 4 and Creating Your First Route , is an introduction to the component-based architecture in React and how you can get started with creating routes using the Route component from React Router. Chapter 2, Configuring Routes, Using Various Options in the Route Component , discusses various Route component props that can be used to match the requested URL location and how these matches can be used to render a com

Using MobX to manage application state in a React application

I have been writing applications using React and Redux for quite some time now and thought of trying other state management solutions out there. It's not that I have faced any issues with Redux; however, I wanted to explore other approaches to state management. I recently came across MobX  and thought of giving it a try. The library uses the premise of  `Observables` to tie the application state with the view layer (React). It's also an implementation of the Flux pattern wherein it uses multiple stores to save the application state; each store referring to a particular entity. Redux, on the other hand, uses a single store with top-level state variables referring to various entities.

On GraphQL and building an application using React Apollo

When I visualize building an application, I would think of using React and Redux on the front-end which talks to a set of RESTful services built with Node and Hapi (or Express). However, over a period of time, I've realized that this approach does not scale well when you add new features to the front-end. For example, consider a page that displays user information along with courses that a user has enrolled in. At a later point, you decide to add a section that displays popular book titles that one can view and purchase. If every entity is considered as a microservice then to get data from three different microservices would require three http  requests to be sent by the front-end app. The performance of the app would degrade with the increase in the number of http requests. I read about GraphQL and knew that it is an ideal way of building an app and I need not look forward to anything else. The GraphQL layer can be viewed as a facade which sits on top of your RESTful services o

React Redux starter kit - Rekit

I have been developing applications using React and Redux for quite some time now and I feel there are several starter kits out there. Although some add too much of boilerplate code, some include several libraries (to make it one kit that includes all) and some take the route of adding minimal boilerplate to include only the required libraries. I plan to write about these React-Redux starter kits/boilerplates in the coming weeks. This post focuses on a starter kit called Rekit. Rekit provides basic scaffolding and comes with a CLI that allows you to add features to your React application. Rekit focuses on application structure. It divides the application in terms of features, wherein each feature acts as a decoupled component and then assembled at the root level.

Building your static site with Hugo, FlightJS, SASS and Gulp

Hugo provides a good workspace for creating layouts and content. I'm very much satisfied with the options available to customise the site. However, Hugo does not have a say in how CSS and JavaScript should be structured so that it can be included on our site. In Hugo, the DOM nodes are already created and we need a mechanism which we can employ in adding event listeners to these DOM nodes. SPA frameworks like Angular and React, create DOM nodes and define event listeners in the controller of the component. To attach event listeners to an existing DOM tree I came across a JavaScript framework called FlightJS . It's a framework created by folks at Twitter that helps in adding behaviour to the DOM nodes. It's a minimal framework which does not dictate how the DOM nodes should be rendered nor it dictates the other aspects of the web application, such as routing, request/response handling, structuring data so that other components can consume it etc. FlightJS provides only a m

Hugo - On layouts and content organization

Layouts in Hugo allow you to define the how the posts in the content directory would be displayed. In addition to defining layouts for the content posts, you can define the layout for the home page, define partials and include it in different layout templates, also define the default layout to be used in case the matching content type layout is not found.

On Static Site Generator - Hugo

Over the last few weeks, I've been looking into a Static Site Generator - Hugo. A Static Site Generator is useful if you're building an application which does not require dynamic data to be served. A blog can be considered as a service which serves static content. Instead of storing the content in a database field, the content is stored in a file (HTML file). Thus when a page is requested the content is served immediately instead of it being generated on demand; resulting in accelerated response times and thus better user experience.

Learning ES6 - Arrow functions and the visibility of this and arguments scope in it

Last week I looked at the use of let and const keywords in ES6 . This week I have been looking at Arrow function expressions, which enable you to create functions without using the function keyword. They provide a shorter syntax to represent a function. I assumed that arrow functions only provide syntax sugar and all function expressions can be replaced with the new syntax. However, the scopes -  this and arguments refers to the enclosing scope and not that of the caller.

Learning ES6 - using let, const and Temporal Dead Zone

I've finally started to learn EcmaScript 6 (ES2015) and thought it would be good to start writing about it as I learn. There are a bunch of features in ES6 and a good place to start would be to learn the use of let and const . I haven't deep dived into all the features yet, but I eventually will. This post is about the use of let and const keywords to create variables. I'm a big fan var scope, but I think I'm going to abdicate var scoped variables in favor of let and const .

Improvising Angular + Require template

Sometime back I wrote a post on using Angular and Require to create a project template . The idea was to make the application more modular and broken down into multiple components that can be easily reused. I have made some more modifications to the template, especially the naming conventions used for files and minor changes to the structure of the project.

Angular + Require project template

I've been working on an Angular project for good number months. There's a lot that I've learned and I've realized that the code I wrote could have been structured in a better way. I wanted to write this post sometime back, however I thought it would be better to create an application structure first and then post my learnings. I have posted all the code on github here -  https://github.com/sagar-ganatra/angular-require-template . The template is still a work in progress, however the basic structure of the template is in place.

Lazy loading AngularJS components using Providers

I've been working on an Angular project for sometime now and I usually run across issues when building the application. In most of the example applications that I've seen, all application script files are loaded upfront i.e. all JavaScript files are loaded when the user accesses application. I get annoyed by this approach; why should all the components be loaded upfront when the probability of user accessing the entire application is very less. How does one architect a multi-page application using Angular? What would be the size of the application after minifying all the JavaScript files. Most importantly how does one load the components lazily. I've used RequireJS in my previous projects and it allows you to load components on demand; the idea is to load components based on the selected route. I've tried a similar approach with Angular using ' resolve ' property in the $routeProvider .

AngularJS - Resolving data services before instantiating the Controller and Template

I have been working on an Angular application for sometime now and I have started to like this approach to client-side development. It's a different approach when compared to developing applications using Backbone and Require. I was looking at routing in Angular and came across the 'resolve' property which can be used to resolve services before instantiating the Controller and it's corresponding template i.e. the domain models that are required for the View components are resolved first.

My second book - 'Kendo UI Cookbook' released!!

The title says it all. My second book titled 'Kendo UI Cookbook' was released last week. I have written over 50 recipes focusing on the Kendo UI application framework, widgets and data visualization components. Here's the link from where you can buy the book -  http://www.packtpub.com/kendo-ui-cookbook/book

On using PageJS as a Router and handling page refresh with pushState enabled

I have been looking at PageJS as a Routing solution for my Backbone applications. PageJS allows you to specify multiple callback functions for a particular route and creates a context object based on the current state of the application. The context object contains valuable information that can be used in constructing View components and in triggering business work flows.

RequireJS - Busting the browser cache with every deployment using Grunt targethtml plugin

The projects that I work on have deployments to the QA very often; testing out the bug fixes and new features. Every time after the deployment, I ask the QA to clear the cache, since all JavaScript files are cached by the browser. This is really frustrating to QA and I needed someway to clear the cache with every deployment. This would be same in a continuous delivery project, wherein the client would be required to clear the browser cache.

More on MVVM with Backbone Stickit plugin

In my last post, I mentioned about two way binding a.k.a MVVM in Backbone using Backbone.Stickit plugin . The Stickit plugin does provide awesome two way binding, but in addition it includes several features that are very much apt when modifying state of model or the view. I've been using these features in my project regularly.

MVVM in BackboneJS using Backbone.Stickit

I have been looking into various design patterns and trying to architect client side applications using it. More often than not the MVC pattern fits the requirement in most of the applications. However, I have found myself using MVVM (Model View - View Model) pattern along with MVC. I use MVVM pattern particularly when I have to maintain the state of the model on the client side. AngularJS provides great support by allowing you to extend the markup and tying the model right within the view (the markup). It also provides components that can be used to structure the application the MVC way and hence it's appropriately termed as MVW or MV* framework. However, I use BackboneJS in most of my applications and I have been able to maintain the state of the model using the Backbone.Stickit plugin.

Win a Free e-Book copy of my book - 'Instant Kendo UI Mobile'

I'm giving away two copies of my book ' Instant Kendo UI Mobile '. All you need to do is to send me a message through the 'Contact Me' form, let me know how this book will benefit you and whether you can post a review as well. You can also message me on Twitter or Facebook . You can find out about the book here -  http://www.packtpub.com/kendo-user-interface-mobile/book

My first book titled 'Kendo UI Mobile' is here!!

The title says it all. I had posted a couple of entries on Kendo UI earlier and was approached by Packt publishing to write on 'Kendo UI Mobile'. Writing a book was both a personal and a professional goal that I had set for myself. Today I have realized it and I feel accomplished. For almost everyone, first things are very special. Be it their first job, paycheck, girlfriend\boyfriend, marriage, first kid and anything that happens for the first time in their life. This is my baby and I'm going to celebrate my win today. If you are planning to build a mobile website or an app using Kendo UI Mobile, this book should get you up and running. Here's the link to the page, from where you can learn about the book and buy it - http://www.packtpub.com/kendo-user-interface-mobile/book

Backbone Collections do not emit 'reset' event after fetch

I recently upgraded my Backbone application to the 1.0 version of the library. When I ran the application, the Backbone View was not rendering anything on the browser screen. I noticed the XHR request being sent in the Network tab of Chrome Dev Tools. This meant that the Collection was fetching the data from the server. However, the 'render' function defined in Backbone View was not being called, which was attached as a callback handler for the 'reset' event on the Collection.

Para - Para - Parallax

I was listening to ColdPlay while developing a Parallax scrolling application and hence the title. Anyway, I was very much intrigued by the parallax scrolling model and wanted to try my hand on building one. The idea here was to show images of different transparency levels in such a way that when the user scrolls, one image would blend over the previous one. Take a look at the application here .

WebRTC experiment - Recognizing hand gestures

I have created a web application that recognizes hand gestures using WebRTC's getUserMedia API. Here's how it works: when you launch the application the browser will prompt you for the permission to access the camera. Click on 'Accept',and then swipe your hand from right to left and vice versa. You would see that the next image  (or the previous image if you swipe from left to right) in the gallery slides through. You can access the application here . Please note, I have tested this application on Chrome only and not on other browsers. Also, I have used five images in this demo and it is obvious that no image would be shown if you swipe from right to left when the last image is being shown or when you swipe from left to right when the first image is shown. I have codenamed this application as 'Gesto' and hence the name in the URL of the application.

Client side MVC: Using Publisher - Subscriber event model to build decoupled components

I've been really busy these days writing client side MVC code. A few months back I explored using Require and Backbone to build the frontend MVC structure . Since then I've been working on improving the structure of my client side code. One approach that I've used is to decouple the components. When I say decouple, the components that I build should not directly alter or affect the behavior of some other component in the page. By decoupling the components, we can ensure that these set of components can be reused and tested in isolation.

Adding beforeRender and afterRender functions to a Backbone View

I was working on a Backbone application that updated the DOM when a response was received from the server. In a Backbone View, the initialize method would perform some operations and then call the render method to update the view. This worked fine, however there was scenario where in I wanted to perform some tasks before and after rendering the view. This can be considered as firing an event before and after the function had completed its execution. I found a very simple way to do this with Underscore's wrap method.

Some useful Underscore methods

I like jQuery and I use it in all my projects. Lately I've been looking into Design Patterns and Backbone framework. Backbone has a dependency on Underscore and more often than not, people use Underscore as a client-side templating engine when using Backbone. I was looking at the Underscore documentation and came across a bunch of useful methods.

Goodbye 2012

2012 has just gone by and all I can say is that, it has been yet another eventful year. The biggest thing that happened to me was my new job at Myntra. It has been two months since I joined my new employer and I'm liking my new work. I had started last year with a few goals (I don't like calling them as resolutions) and the very first one was to reduce weight. I had met with an accident in 2011 (a terrible one) and had to stay at home for two months. And by staying at home and munching all that good food, I had put on some extra weight and wanted to loose it desperately. I think I almost cleared that goal and now I'm proud of it.

Applying MVC to your frontend application using Require and Backbone

I've been looking into BackboneJS for quite sometime now and thought it would interesting to build an application using the MVC pattern. Although Backbone provides various components - Models, Collections, Routers and Views; it doesn't provide a framework that can help you to structure the application using these components. While working on this application, I realized that I can separate these components in such a way that they can be made reusable or rather loosely coupled by defining the components in separate files. However, there was an interesting problem that I came across where the Views had a dependency on the Collections to be loaded first and then render the template data. I had read a little about RequireJS that allowed modules to be loaded asynchronously and also in resolving dependency. Thought I would give it a try and see whether it addresses this problem.