Gabo Esquivel - Javascript Engineer Javascript Developer and Web Technology Consultant.

Differences Between TDD, ATDD and BDD

Test-driven development (TDD) is a technique of using automated unit tests to drive the design of software and force decoupling of dependencies. The result of using this practice is a comprehensive suite of unit tests that can be run at any time to provide feedback that the software is still working.

The concept is to “get something working now and perfect it later.” After each test, refactoring is done and then the same or a similar test is performed again. The process is iterated as many times as necessary until each unit is functioning according to the desired specifications. Test-driven development is part of a larger software design paradigm known as Extreme Programming (XP).

more on TDD

ATDD stands for Acceptance Test Driven Development, it is also less commonly designated as Storytest Driven Development (STDD). It is a technique used to bring customers into the test design process before coding has begun. It is a collaborative practice where users, testers, and developers define automated acceptance criteria. ATDD helps to ensure that all project members understand precisely what needs to be done and implemented. Failing tests provide quick feedback that the requirements are not being met. The tests are specified in business domain terms. Each feature must deliver real and measurable business value: indeed, if your feature doesn’t trace back to at least one business goal, then you should be wondering why you are implementing it in the first place.

more on ATDD

Behavior-Driven Development (BDD) combines the general techniques and principles of TDD with ideas from domain-driven design. A team using BDD should be able to provide a significant portion of “functional documentation” in the form of User Stories augmented with executable scenarios or examples.

The focus of BDD is the language and interactions used in the process of software development. Behavior-driven developers use their native language in combination with the language of Domain Driven Design to describe the purpose and benefit of their code. BDD is usually done in very English-like language helps the Domain experts to understand the implementation rather than exposing the code level tests. Its defined in a GWT format, GIVEN WHEN & THEN.

more on BDD


TDD is rather a paradigm than a process. It describes the cycle of writing a test first, and application code afterwards – followed by an optional refactoring. But it doesn’t make any statements about: Where do I begin to develop? What exactly should I test? How should tests be structured and named? .When your development is Behavior-Driven, you always start with the piece of functionality that’s most important to your user.

TDD and BDD have language differences, BDD tests are written in an english-like language.

BDD focuses on the behavioural aspect of the system unlike TDD that focuses on the implementation aspect of the system.

ATDD focuses on capturing requirements in acceptance tests and uses them to drive the development. (Does the system do what it is required to do?)

BDD is customer-focused while ATDD leans towards the developer-focused side of things like [Unit]TDD does. This allows much easier collaboration with non-techie stakeholders, than TDD.

TDD tools and techniques are usually much more techie in nature, requiring that you become familiar with the detailed object model (or in fact create the object model in the process, if doing true test-first canonical TDD). The typical non-programming executive stakeholder would be utterly lost trying to follow along with TDD.

BDD gives a clearer understanding as to what the system should do from the perspective of the developer and the customer.

TDD allows a good and robust design, still, your tests can be very far away of the users requirements.BDD is a way to ensure consistency betwenn users requirements and the developper tests.

FullStack Development Plugins for Sublime Text

Have You Sharpened Your Axe? Your text editor is the most important tool you have for software development. It is important that you take the time known it well, learn how to use the features available and customize it with extensions and snippets. Mastering your text editor pays off, it will save you a lot of time.

Here’s a list of useful plugins you may want to install if you are using Sublime Text.

Package Control

The Sublime Text package manager that makes it exceedingly simple to find, install and keep packages up-to-date. This should be the first plugin to install.

It helps discovering, installing, updating and removing packages. It features an automatic upgrader and supports GitHub, BitBucket and a full channel/repository system. It’s like apt-get for Ubuntu, pip for Python and npm for node.js.


A is a full-featured code intelligence and smart autocomplete engine for JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

Provides the following features:

Jump to Symbol Definition – Jump to the file and line of the definition of a symbol. Imports autocomplete – Shows autocomplete with the available modules/symbols in real time. Function Call tooltips – Displays information in the status bar about the working function.

Node.js Application Frameworks

Speed in software development is key for building a successful product and one of the tools that helps to deliver faster is an application framework. The app development framework provides an structure, handles repetitive tasks and alleviates the overhead associated with common activities allowing you to focus on feature development. Good frameworks will enforce good practices and code reuse (modules).

In this post I’ll list some of the most popular NodeJS frameworks and their characteristics.

Sails – Realtime MVC Framework for Node.js

An MVC web framework with a modern twist, supporting WebSockets, streams, and a data-driven API.

Sails.js is designed to mimic the MVC pattern of frameworks like Ruby on Rails, but with support for the requirements of modern apps: data-driven APIs with scalable, service-oriented architecture. It’s especially good for building chat, realtime dashboards, or multiplayer games.

Sails.js is database agnostic. Its ORM, Waterline, provides a simple data access layer that works, no matter what database you’re using. It automatically generates a RESTful JSON API for your app and provides basic security and role-based access control by default, and you can add as many custom policies as you like.

It is built on Express (for routing), EJS (for templating) and (for cross-platform WebSockets with graceful degredation) with a convention-over-configuration philosophy, just like Ruby on Rails.

Express – Sinatra Inspired Web Development Framework for Node.js.

Express.js is minimal and flexible web application framework, providing a robust set of features for building single and multi page, and hybrid web applications.

It has a myriad of HTTP utility methods and Connect middleware at your disposal for creating a robust user-friendly API quick and easy. It also has a thin layer of features fundamental to any web application, without obscuring features that you know and love in node.js. The pluggable middleware in the framework provides a great way to add elements, such as passport.js, as you need them.

Hapi – A Rich Framework for Building Applications and Services

Hapi enables developers to focus on writing reusable application logic instead of spending time building infrastructure.

It shines with essential built-in features that your API server or webpage mostly needs. Hapi was built by Walmart labs (Spumko, Eran Hammer) and it is configuration-centric, more declarative. Pretty well battle tested by their mobile app customers.

Koa – Next Generation Framework for Node.js

Koa.js is new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.

Through leveraging generators Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within core, and provides an elegant suite of methods that make writing servers fast and enjoyable.

There are many other NodeJS frameworks, you can find a categorized list at

Get Started With Command Line and Z Shell

A quick introduction… To develop a web application tooling and workflow are very important. Taking the time to learn and master command line is not only highly recommended but it is required to make use of tools that will help you develop faster and gain more control of your workflow.

This post summarizes what you need to know to get going with command line as well sharing some personal recommendations on the setup of the command prompt on MAC OS X, but it applies to *nix as well.

What is a Shell?

The Shell is an application that offers interactive console or terminal access to a computer system. It lets you interact with applications on your computer through command line. A command-line interface (CLI) is a mechanism for interacting with a computer operating system or software by typing commands to perform specific tasks, a command-line interpreter then receives, parses, and executes the requested user command.

Most operating systems offer a command line interface, but that doesn’t mean the built-in version is best. MAC OS X comes with Terminal, however there’s a terminal emulator for Mac OS X that is more customizable and does amazing things out-of-the-box, it’s called iTerm. If you are using a windows machine I’d recommend you installing cygwin.

In order to use the command line prompt you will need to memorize commands. Start with the basic system commands, once you mastered that you’ll catch up quickly with other tools such as gulp.js.

Introduction to Gulp.js – Code Over Configuration

Automation of repetitive and critical tasks is key to develop a successful software product. Automated tasks will minimize software cost, reduce software delivery time as well as improving the product quality and reduce human error. Investing time in automating tasks will allow you to focus on developing features.

“War is of vital importance to the state; hence it is a subject of inquiry which can on no account be neglected”
– Sun Tzu, Art of War

In this post I will introduce you to Gulp.js, a javascript task runner that helps you automate your development process.

Setting Up your Web App Build System

When developing modern web applications there are critical tasks you want to automate:

  • testing: code linting, unit testing, e2e tests
  • css preprocessing ( sass, less, …)
  • optimization: concatenating and minifying css and scripts, compressing new or modified images, …
  • deploying updates to a staging or production server

There are many tools that will help you automate these tasks. Which one to choose? Grunt, Gulp, Brunch, Broccoli,…

Back in 2012 Grunt.js came out and it was quickly adopted by the community, plugins started to proliferate and it became king for task automation on the client side, playing well with Bower and Yeoman. Like many other developers I’ve been using Grunt on my projects and it gets the job done but recently I started to use Gulp, another open source project with faster build times and a Unix/Node philosophical approach to solve problems.

Gulp.js focuses on code over configuration. By harnessing the power of Node streams, it enables faster build times by avoiding the need to write temporary files to disk. This is one of the main differences with Grunt. Stream instances are basically Unix pipes. They can be readable, writable or both and are easy to reason about — you can pipe a readable stream to a writable stream by doing readableStream.pipe(writableStream).

“Streams come to us from the earliest days of unix and have proven themselves over the decades as a dependable way to compose large systems out of small components that do one thing well.
You can then plug the output of one stream to the input of another and use libraries that operate abstractly on streams to institute higher-level flow control.”

– substack

Overview of Angular Generators – April 2014

This is a short and opinionated review of the AngularJS generators on npm as of April 19th, 2014.

There are a lot of generators on npm and it’s a little hard to decide which one to use or fork, since we don’t want to reinvent the wheel. Currently the only way to compare them is to try them one by one and that’s a very time consuming task. In this post I’ll try to give you an overview of some generators I’ve explored recently hoping it will save you some time. I’ll follow Cliff Meyer’s Code Organization Categorization to describe their code structure.

Most generators still use the “Sock Drawer” directory organization, an approach that I personally avoid, it doesn’t scale well but it works for small projects. I prefer a modular structure as suggested on latest Google’s Best Practice Recommendations for Angular App Structure.

Some of the benefits of modularization are:

Encapsulation: Code, styles and tests related to specific feature will be contained on the same directory.
Context: Code lives in given context by feature. This is specially important to developers new to the application, who will find it easier to connect the dots.
Code Reusabilty: You would be able to reuse modules across projects and clients, Eg mobile and web-client could share autentication modules or resources ( models ).

Here’s a list of Angular generators and their characteristics (some of them are fullstack generators):

Developing Software in Paradise, Aka Costa Rica

Coming back to Costa Rica and enjoy my country while working on software applications is one of the best decisions I ever made. Check out these pictures I took with my phone at Playa Manzanillo, near to Santa Teresa – Mal País, a natural paradise with world class surfing that ranks among the most beautiful beaches of Costa Rica and you’ll agree is the best place to live or invest in the country.

playa-manazanillo-sunset vacas-playa-manzanillo playa-manzanillo-reef rocks-playa-manzanillo

Santa Teresa was recently awarded by Trip Advisor as the #1 highest-rated travel location in all of both Central and South America. Malpais and Montezuma both have many of the best restaurants in the entire country, since many international chefs have moved to the area. The area is also a major center of Costa Rica Yoga with over a dozen places to learn/practice and many yoga retreats and surf+yoga retreat combinations.

Elion Chin, co-founder of MoodLogic – one of the first online music recommendation systems, is leading Silicon Beach a forum for entrepreneurs & people looking to invest in, work at, advise or network with startups in Costa Rica to promote the technology talent of Costa Rica and drive the start-up culture in a fulfilling and healthy environment to deliver the best.

Silicon Beach Costa Rica

#Hack4Good in Costa Rica

Hack4Good is global hackathon that gathers the worlds greatest expert engineers, designers, product builders and entrepreneurs for 48 hours to develop applications for helping humanity. Themes will include hacking to help: environment, disaster and emergency solutions, education and learning, workplace and jobs, poverty and hunger.

There will be prizes, of course, both locally and globally, but the biggest prize will be the reward of helping make the world a better place together.

The event will take place on October 4th-6th in multiple cities: San Francisco, San Diego, Los Angeles, New York, Philadelphia, Paris, Londres, Berlín, Moscú, Tel Aviv, Santiago, Cincinnati, Minsk, Kazan, Kathmandu, Topi, New Delhi and San José, Costa Rica.

The hackathon starts on Friday at 04:00pm and ends on Sunday at 05:00pm, at 6:30pm winners will be announced.

The location will be published soon. You can register at for joining us at the Costa Rica location or for participating online.

See you there !

Choosing the Database for Your Web App

When choosing a database for your application, you need ask yourself many questions and there are important rules about Data Architecture

  • there’s no standard solution that fits all
  • the business and it’s data defines the architecture
  • you need to find the right tool that does job
  • you can use multiple databases, different types depending on the characteristics of each data subset


It is very important to decide carefully, after your application grown it could be very difficult to change. The CAP theorem, also known as Brewer’s theorem, states that it is impossible for a distributed computer system to simultaneously provide all three of the following guarantees:

  • Consistency (all nodes see the same data at the same time)
  • Availability (a guarantee that every request receives a response about whether it was successful or failed)
  • Partition tolerance (the system continues to operate despite arbitrary message loss or failure of part of the system)
CAP Theorem - Venn Diagram

Once you have defined which of those guarantees is less important for your app and can be sacrificed, you have a smaller subset of options to choose from. However this not the only thing you need to consider, you may want to use a specific framework such as Hibernate, Spring, Django or WordPress, and take advantage of the of-the-shelf capabilities, in that case you want to use a SQL database.

Data Visualization in Costa Rica

I’m very excited to announce that we’re starting a data visualization meetup group in Costa Rica!

At the last Hack Hackers SJO event I finally had the pleasure to meet Yuri Engelhardt in person after months of exchanging emails and ideas about data visualization in Costa Rica. Yuri is the co-founder of Show Me Data, an annual multidisciplinary course and public event that brings together the University of Amsterdam (UvA) and the Utrecht Graduate School of Visual Art and Design (maHKU) students to get familiar with the world of data visualization.

Over a couple of beers Yuri expressed me his idea of watching and discussing together MOOC videos from his video library, I thought that was really rad! … I´m very interested in data visualization and all the possibilities you have to make the world a better place using these technologies. After the event we exchanged  a couple more emails on the topic and we decided to create a meetup group to bring together all professionals and data visualization enthusiasts to share our knowledge and ideas. That’s how the Costa Rica Data Visualization Group was born.

Data Visualization Costa Rica  is a non-profit professional group that aims to meet monthly to discuss data visualization, data communication, infographics, exploratory data analysis, charts and graphs, perceptual psychology, and more! Our members are data journalists, programmers, data scientists, business intelligence professionals, and others who tell stories with data. Meeting topics will vary and range from tutorials on basic concepts and their applications, to success stories from local practitioners, to discussions of tools, new technologies, and best practices.