Express.js vs Sails.js Comparison



This is an overview comparing Node.JS frameworks including Express, Sails, HAPI and Lazo.js. Express is clearly the most popular currently version 4 at the time of this writing.   The next framework gaining popularity is Sails currently at version 0.10 with 124 code contributors since its inception in 2012.  Sails is not an independent framework on its own, because it uses Express for handling HTTP requests.  HAPI has 95 code contributors since 2011 but is mainly for building APIs on your server.   I am also mentioning Lazo.js because it was developed for SEO compliant websites and single-page applications are natively not SEO-friendly.

Express takes the most common tasks for a web server and makes them easier to use with less lines of code wrapping native Node.js functions.  Since there are cases where Express doesn’t abstract a needed function or doesn’t conform to some preferred convention, other frameworks take place.  Those other frameworks are not completely independent therefore you still have to use Express.  Since Express is already widely written about let’s focus on the other frameworks.  The possible main detractions of Express are the lack of  database abstraction and real-time socket communication.

SAILS

This is where Sails comes in.  Sails follows the “Convention over Configuration” philosophy adding value to Express in several ways.  First it wraps socket.io for managing websockets whereas in Express you have different instances of HTTP and websocket servers.  Sails also includes a command line generator to quick start your projects using a scaffolding.  The folders generated will be:


/assets (for libraries)
/public (files rendered to client-side)
/config (settings, scripts before launch, translations, policies, and routes)
/view (templates in embedded javascript format)
/api (database adapters, models, controllers, and services)

Another great benefit of Sails is concatenating and minifying CSS and JS files using Grunt.  This will improve performance for the client-side because any additional files via GET calls increase page load times.  Routes in Sails use RESTful route conventions and are also similar to AngulaJS routes.  Here’s an examples:


module.exports = {
'/login': {
controller: 'auth',
action: 'login'
}
}

The typical url route may be /:controllers/:action/:id with automatic redirection if a parameter is omitted.

The views are for html templates using embedded js (ejs) and have four types:

  1. partial – html snippets
  2. layout – html that goes outside the body such as headers and footers
  3. server-side
  4. client-side

Models are defined by attributes and associations.  They follow object-role modeling Waterline.  The data adapters are pre-configured for memory, disk, and mysql. Here’s an example of a model:


var Model = {
attributes: {
title: {
type: 'STRING',
required: true
}
}
}

Controllers can be generated by command line with or without these included actions:
create, destroy, like, tag. Here’s a code examples:


var CommentController = {
create: function(req, res) {
...
}
}
module.exports = CommentController;

So now that you have something to compare to besides Express, let’s go over HAPI version 7, started in late 2013.

HAPI

HAPI is a little more of the “Configuration over Convention” philosophy because it is designed for APIs but also includes features not available in Sails. These included features are:

  • input validation
  • caching
  • pre-fetching
  • auto documentation

The downside is the lack of community support, even though there are several modules available for download. Interestingly enough, HAPI cannot listen to localhost address. Here’s a code example:


var server = new hapi.Server('0.0.0.0', 8080, config);
server.route({
method: 'GET',
path: '/hello',
handler: function (request, reply) {
reply('hello world');
}
});

LAZO

Finally another addition which is powered by HAPI is LAZO.js  This framework uses require.js, backbone, jquery and handlebars.  The reason LAZO is SEO compliant is because the routes are mapped to a URI for crawlers to index your site.

The anatomy is smaller so you only have:


/app (configuration code, css, and utilities)
/component (business logic encapsulation,
/models (data models and collections)

 

 

Developing Responsive Web Applications with AJAX and jQuery Review

book cover

Book available for puchase at PacktPub.com

You can develop web applications in so many ways and this book teaches you how with the most popular front-end library, jQuery and AJAX. Initially I was excited to find out if it’s possible to build a responsive web application only with jQuery and Ajax, but you still need a back-end. In this case, the author uses Tomcat to run a java server as the back-end. You might be surprised that all the source code files are in the txt extension along with one war file. Then I realized uncompressing the war file will output all the proper files to open the website without some java-based IDE. A non-java developer might not be able to figure that out right away, so the book is definitely targeted for java developers who want to learn the front-end.

Even though it’s possible to open the source code locally into a browser, it won’t be fully functional without running Tomcat. As a front-end developer I have read through all the examples and they are coded well, including comments, to demonstrate getting data from 3rd party APIs such as Twitter, Facebook, Google, YouTube, and Paypal. After having read through the book, it appears that more of the examples demonstrate usage of APIs rather than responsiveness. The early chapters do include details on responsive-making elements such as media queries, layouts, and the opera testing emulator, yet the author just uses Twitter Bootstrap for his app. I liked that the book includes good resources such as Draw.io and a few important CSS properties not seen in other books such as the text-overflow: ellipsis. Continue reading →

Building an Application with CoffeeScript Review

coffeescript course image

The intro of the video course states “familiarize yourself with CoffeeScript” and I did (course link http://bit.ly/1ix4XXb)  The other list items of learning in the description are also fairly accurate.  The “cake” built tool was demonstrated, using jQuery with coffeescript was demonstrated, built a simple framework was also demonstrated.  The inaccurate part of the description is the “Who is this video course for” which states “if you’re a beginner Javascript developer… this course is for you” …NOT!  Realistically it should be written as “if you’re a beginner coffeescript developer this course is for you”.  The usage of MVC concepts was great but it’s helpful if you’re already familiar with MVC.

After going through the course, I realized it is a good overview of coffeescript and how useful it could be, even though it’s not what I would call a “walkthrough” course.  It’s more of a class lecture where the professor describes the things you can do with coffeescript with a few examples then you get homework and have to figure it out on your own.

I was really excited at the beginning (section 1) watching the author use http://js2coffee.org to see the instant conversion of javascript.  It’s really fantastic how coffeescript applies good coding methods to develop your code.  This is also the part the author referred to the coffeescript’s documentation which is fine, but an actual demo would have been better.  I found the command line “cake” easy to understand but the author just types “cake -c filename” to show you the compiling but not telling you the “-c” option which I had look for in the documentation myself.

The template files are included so that’s helpful, but the coding speed in the video is too fast so don’t try to code along.  You will just have to open the corresponding chapter files when changing chapters.  The added benefit is some resources introduced in the video like the website where you can find any javascript library and a javascript library for generating PDF files.

To summarize this would have been an excellent course if it were double in length, walking you through the coding process, but instead it seems like a professor doing a typical lecture and expecting you to figure out the homework on your own. Get the course here!

1 Hour Crash Course in AngularJS

Have you thought about learning AngularJS, but find all the examples just too basic?

I did too!  I spent an entire week (full-time) during my vacation to break open AngularJS and see what’s possible.   What I came up with as a demo is a quiz where you can type in questions and answers, then play the questions one at a time to test yourself.  Here’s the curated content to spend 7 days learning AngularJS.

Continue reading →

Top 5 Sublime Text Shortcuts

Top 5 Shortcuts That Will Boost Your Coding Productivity

Are you new to the sublime text editor?  It’s really more powerful than it looks.   While it’s easy navigation with mouse and keyboard all the powerful tools are quickly accessible with a few shortcuts.  VIM users will likely stick to VIM after the steep learning curve of the abundance of keyboard navigation and non-existent mouse usage.  That’s great for speed and editing in SSH but take a look at the top 5 shortcuts that you can learn in Sublime Text 2.  You will go from novice to intermediate a lot faster in Sublime than VIM.

This top 5 list is coming from a non-VIM user, although I’ve tried VIM and appreciate what it has to offer.  In my brief opinion, VIM is for the hardcore coder while Sublime is for everyone who likes to code.  The following shortcuts are for Mac but you can substitute the CMD key for CTRL on Windows.  Also the ‘=’ sign does not include part of the shortcut.

NUMBER 5

SNIPPETS

This is not a shortcut itself, but allows you to include pre-defined text and function names for different languages.  You will find some pre-installed in Sublime Text 2, but you’ll have to download packages to your specific programming language.  It’s a bit annoying because you’ll need GIT and run terminal but it’s well worth it.

This is an example to do with GIT.  Clone the snippet repo into your User directory under Sublime Text.

~/Library/Application Support/Sublime Text 2/Packages/User/

Such as http://emmet.io/ for HTML and CSS and for https://github.com/kswedberg/jquery-tmbundle/tree/master/Snippets jquery/

NUMBER 4

Cmd + D or Double-click a word = highlight all instances of the word

This is great when you want to add quotes or parentheses around the selected text.  It’s a lot faster than typing quotes then pushing the arrow keys to close the quotes.

NUMBER 3

Cmd + R = Find symbols.

Symbols is defined by Sublime but in reality it means you can directly find functions in scripting languages or style directives in CSS.  The search works in conjunction with the @ symbol if you want to find something in a non-currently opened file.

NUMBER 2

Shift + Cmd + F = Search in all files

This is another great search feature which includes “search & replace” although it works in the current file as well as out of scope and searches all the files and directories in the root folder you have opened in Sublime Text 2.

NUMBER 1

Cmd + P = Find anything mainly files

You have your typical Ctrl+F for finding text, but Cmd+P will allow navigation to another file, package, directory, and menu options of the program itself.

Always remember “fuzzy” searching.

Make a Game with ImpactJS Tutorial

While doing research in game development using HTML5, ImpactJS is a framework that is mentioned as being the best to date for making HTML5 games.  The great thing is that you can port over HTML5 to mobile platforms using AppMobi, PhoneGap, or Ejecta.  You will also learn Node.js and Socket.io in the tutorials.

Here is an extended tutorial for beginners:

The entire playlist http://www.youtube.com/playlist?list=PLAD5A0C028DA09694

Responsive Web Design with jQuery Review

responsive-deign-jquery-cover

If you’re looking for a plethora of plugins, scripts, shims to add responsiveness this book is for you, but be prepared to figure out the differences yourself.  The book is written more like a reference book with short examples and brief explanation of many jQuery plugins.

I read the title several times after reading the content and can say that it is not the best fit.  My initial thinking led me to believe this would be more about coding with jQuery, however this is not the case.  The book is geared more for web designers that do not code with jQuery.  Most of the examples include jQuery with little explanation so you can get similar information available in the documentation of the individual plugins.  Possibly the worst part is that the author rarely distinguishes pros and cons of individual plugins doing nearly identical tasks.  There’s a lack of diagrams and screenshots so you have to implement the examples to see how they work.  On the other hand the author also lists many tools available via websites for wire-framing, placeholder creation, pixel conversions, and grid systems.

I would recommend this book for web designers that know html, css, jquery syntax and want to make their static designs responsive, elastic, or fluid with high browser compatibility.  Without knowledge of jQuery basics it’s difficult to customize the plugins made for responsive design.  Near the end of the book there is mention of performance and ideally you want the minimum amount of http GETS to load your scripts.  However with all the plugins available your design will easily accumulate 7+ js files.

You won’t become an expert in “responsive design” nor will you know how the plugins really work behind the scenes, but it’s a good place to start.

Continue reading →

How to Get Free Press for your Software

press release

Have you heard of “any press is good press”?
It will make people aware of your product regardless if it’s any good when it times for them to buy.

Build credibility, get exposure, and more traffic to your website.  Forget about generating back links through bots and blog commenting.  It is much more effective doing it the following ways.

One of my first startup projects had its first sale from an article on a different website. How did I know? I had referral clicks recorded in my google analytics.  A press release is an announcement of an event, product, service, or discovery which is issued publicly.  It is important to have something unique or an angle to what you have to offer in a press release.

Here are some different tactics to get you free publicity:

Continue reading →

Scale HTML5 Video to Fit Screen

Fullscreen HTML5 Video


With the recent updates of browsers supporting web more W3C standards, it is easier to embed HTML5 videos than before, although you still have to provide your video in multiple codecs such as webm, ogg, and mp4.
The thing is you still have to use javascript to control the video’s functionality. So here’s the simplest way to make your HTML5 video fit the screen of your browser. For this demo I will be using the popular and free video.js open source player.  There are several ways to do this, but after testing across different browsers I found this way the most efficient. (Demo inside)
Continue reading →

Javascript Fluent Confrence 2013 Review

Javascript Fluent Conference

Overall this video collection of Fluent Conference is a great value with a few useless presentations sprinkled in. The good thing is that you can skip the videos that seem to be useless and this mainly applies to the sessions. If you were to be at the conference, then you would have lost time attending them. Before I mention ones that you should avoid, I will mention the noteworthy presentations. This is mostly the tutorials. It took me a few weeks, but I ended watching all the videos.

Here’s my breakdown by sections:
Continue reading →