Basics - QUICK START - Rapid Prototyping with JS: Agile JavaScript Development (2014)

Rapid Prototyping with JS: Agile JavaScript Development (2014)

I. QUICK START

1. Basics

Summary: overview of HTML, CSS, and JavaScript syntaxes; brief introduction to Agile methodology; advantages of cloud computing, Node.js and MongoDB; descriptions of HTTP requests/responses, RESTful API concepts.

“I think everyone should learn how to program a computer, because it teaches you how to think. I view computer science as a liberal art, something everyone should learn to do.” — Steve Jobs

1.1 Front-End Definitions

1.1.1 Bigger Picture

The bigger picture of web and mobile application development consists of the following steps:

1. User types a URL or follows a link in her browser (a.k.a. client)

2. Browser makes HTTP request to the server

3. Server processes the request, and if there are any parameters in a query string and/or body of the request, it takes them into account

4. Server updates/gets/transforms data in the database

5. Server responds with HTTP response containing data in HTML, JSON or other formats

6. Browser receives HTTP response

7. Browser renders HTTP response to the user in HTML or any other format, e.g., JPEG, XML, JSON

Mobile applications act in the same manner as regular websites, only instead of a browser there is a native app. Other minor differences include: data transfer limitation due to carrier bandwidth, smaller screens, and the more efficient use of the local storage.

There are a few approaches to mobile development, each with its own advantages and disadvantages:

· Native iOS, Android, Blackberry apps build with Objective-C and Java

· Native apps build with JavaScript in Appcelerator, or similar tools, and then complied into native Objective-C or Java

· Mobile websites tailored for smaller screens with responsive design, CSS frameworks like Twitter Bootstrap or Foundation, regular CSS or different templates

· HTML5 apps which consist of HTML, CSS and JavaScript, and are usually built with frameworks like Sencha Touch, Trigger.io, JO, and then wrapped into native app with PhoneGap

1.1.2 HyperText Markup Language

A HyperText Markup Language, or HTML, is not a programming language in itself. It is a set of markup tags which describe the content and present it in a structured and formatted way. HTML tags consist of a tag name inside of the angle brackets (<>). In most cases, tags surround the content with the end tag having forward slash before the tag name.

In this example, each line is an HTML element:

1 <h2>Overview of HTML</h2>

2 <div>HTML is a ...</div>

3 <link rel="stylesheet" type="text/css" href="style.css" />

An HTML document itself is an element of the html tag, and all other elements are children of that html tag:

1 <!DOCTYPE html>

2 <html lang="en">

3 <head>

4 <link rel="stylesheet" type="text/css" href="style.css" />

5 </head>

6 <body>

7 <h2>Overview of HTML</h2>

8 <p>HTML is a ...</p>

9 </body>

10 </html>

There are different flavors and versions of HTML, e.g., DHTML, XHTML 1.0, XHTML 1.1, XHTML 2, HTML 4, HTML 5. This article does a good job of explaining the differences — Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip.

Any HTML element can have attributes. The most important of them are: class, id, style, data-name, onclick, and other event attributes.

class

Class attribute defines a class which is used for styling in CSS or DOM manipulation, e.g.:

1 <p class="normal">...</p>

id

Id attribute defines an ID which is similar in purpose to element class but has to be unique, e.g.:

1 <div id="footer">...</div>

style

Style attribute defines inline CSS to style an element, e.g.:

1 <font style="font-size:20px">...</font>

title

Title attribute specifies additional information which is usually presented in tooltips by most browsers, e.g.:

1 <a title="Up-vote the answer">...</a>

data-name

Data-name attribute allows for meta data to be stored in DOM, e.g.:

1 <tr data-token="fa10a70c-21ca-4e73-aaf5-d889c7263a0e">...</tr>

onclick

Onclick attribute calls inline JavaScript code when click event happens, e.g.:

1 <input type="button" onclick="validateForm();">...</a>

onmouseover

Onmouseover attribute is similar to onclick but for mouse hover events, e.g.:

1 <a onmouseover="javascript: this.setAttribute('css','color:red')">...</a>

Other HTML element attributes for inline JavaScript code are:

· onfocus: when browser focuses on an element

· onblur: when browser focus leaves an element

· onkeydown: when a user presses a keyboard key

· ondblclick: when a user double-clicks the mouse

· onmousedown: when a user presses a mouse button

· onmouseup: when a user releases a mouse button

· onmouseout: when a user moves mouse out of the element area

· oncontextmenu: when a user brings up a context menu

The full list of such events and a browser compatibility table are presented in Event compatibility tables.

We’ll use classes extensively with Twitter Bootstrap framework, while the use of inline CSS and JavaScript code is generally a bad idea, so we’ll try to avoid it. However, it’s good to know the names of the JavaScript events because they are used all over the place in jQuery, Backbone.js and of course plain JavaScript. To convert the list of attribute to a list of JS events, just remove the prefixes on, e.g., onclick attribute means click event.

More information is available at Example: Catching a mouse click, Wikipedia and w3schools.

1.1.3 Cascading Style Sheets

Cascading Style Sheets, or CSS, is a way to format and present content. An HTML document can have an external stylesheet included in it by a link tag, as shown in the previous examples, or can have CSS code directly inside of a style tag:

1 <style>

2 body {

3 padding-top: 60px; /* 60px to make some space */

4 }

5 </style>

Each HTML element can have id and/or class attributes:

1 <div id="main" class="large">

2 Lorem ipsum dolor sit amet,

3 Duis sit amet neque eu.

4 </div>

In CSS we access elements by their id, class, tag name and in some edge cases by parent-child relationship or element attribute value.

This sets a color of all the paragraphs (p tag) to grey (#999999):

1 p {

2 color:#999999;

3 }

This sets padding of a div element with id main:

1 div#main {

2 padding-bottom:2em;

3 padding-top:3em;

4 }

This sets the font size to 14 pixels for all elements with a class large:

1 .large {

2 font-size:14pt;

3 }

This hides div which are direct children of body element:

1 body > div {

2 display:none;

3 }

This sets the width to 150 pixels for input which name attribute is email:

1 input[name="email"] {

2 width:150px;

3 }

More information is available at Wikipedia and w3schools.

CSS3 is an upgrade to CSS which includes new ways of doing things such as rounded corners, borders and gradients, which were possible in regular CSS only with the help of PNG/GIF images and by using other tricks.

For more information refer to CSS3.info, w3school and CSS3 vs. CSS comparison article on Smashing.

1.1.4 JavaScript

JavaScript was started in 1995 at Netscape as LiveScript. It has the same relationship with Java as a hamster and a ham. :-) These days, JavaScript is used for both client and server-side web, as well as in desktop application development.

Putting JS code into a script tag is the easiest way to use JavaScript in an HTML document:

1 <script type="text/javascript" language="javascript">

2 alert("Hello world!");

3 //simple alert dialog window

4 </script>

Be advised that mixing HTML and JS code is not a good idea, so to separate them we can move the code to an external file, and include it by setting source attribute src="filename.js" on script tag, e.g., for app.js resource:

1 <script src="js/app.js" type="text/javascript" language="javascript">

2 </script>

information

Note

The closing </script> tag is mandatory even with an empty element like we have where we include the external source file. Type and language attributes over the years became optional in modern browsers due to the overwhelming JavaScript dominance.

Other ways to run JavaScript include:

· Inline approach already covered above

· WebKit browser Developer Tools and FireBug consoles

· The interactive Node.js shell

One of the advantages of the JavaScript language is that it’s loosely typed. This loose/weak typing, as opposed to strong typing in languages like C and Java, makes JavaScript a better programming language for prototyping. Here are some of the main types of JavaScript objects/classes (there are not classes per se; objects inherit from objects):

Number primitives

Numerical values, e.g.:

1 var num = 1;

Number Object

Number object and its methods, e.g.:

1 var numObj = new Number("123"); //Number object

2 var num = numObj.valueOf(); //number primitive

3 var numStr = numObj.toString(); //string representation

String primitives

Sequences of characters inside of single or double quotes, e.g.:

1 var str = "some string";

2 var newStr = "abcde".substr(1,2);

For convenience, JS automatically wraps string primitives with String object methods, but they are not quite the same.

String object

String object has a lot of useful methods, like length, match, etc., for example:

1 var strObj = new String("abcde");//String object

2 var str = strObj.valueOf(); //string primitive

3 strObj.match(/ab/);

4 str.match(/ab/); //both call will work

RegExp object

Regular Expressions or RegExps are patterns of characters used in finding matches, replacing, testing of strings:

1 var pattern = /[A-Z]+/;

2 str.match(/ab/);

Special Types

When in doubt, you can always call typeof obj. Here are some of the special types used in JS:

· NaN

· null

· undefined

· function

Globals

You can call these methods from anywhere in your code, because they are global methods:

· decodeURI

· decodeURIComponent

· encodeURI

· encodeURIComponent

· eval

· isFinite

· isNaN

· parseFloat

· parseInt

· uneval

· Infinity

· Intl

JSON

JSON library allows us to parse and serialize JavaScript objects, e.g.:

1 var obj = JSON.parse('{a:1, b:"hi"}');

2 var stringObj = JSON.stringify({a:1,b:"hi"});

Array object

Arrays are zero-index-based lists. For example, to create an array:

1 var arr = new Array();

2 var arr = ["apple", "orange", 'kiwi"];

The Array object has a lot of nice methods, like indexOf, slice, join. Make sure that you’re familiar with them, because if used correctly, they’ll save a lot of time.

Data Object

1 var obj = {name: "Gala", url:"img/gala100x100.jpg",price:129}

or

1 var obj = new Object();

More on inheritance patterns below.

Boolean primitives and objects

Same as with String and Number, Boolean can be a primitive and an object.

1 var bool1 = true;

2 var bool2 = false;

3 var boolObj = new Boolean(false);

Date object

Date objects allow us to work with dates and time, e.g.:

1 var timestamp = Date.now(); // 1368407802561

2 var d = new Date(); //Sun May 12 2013 18:17:11 GMT-0700 (PDT)

Math object

Mathematical constants and functions, e.g.:

1 var x = Math.floor(3.4890);

2 var ran = Math.round(Math.random()*100);

Browser objects

Gives us access to browser and its properties like URL, e.g.:

1 window.location.href = 'http://rapidprototypingwithjs.com';

2 console.log("test");

DOM objects

1 document.write("Hello World");

2 var table = document.createElement('table');

3 var main = document.getElementById('main');

warning

Warning

JavaScript supports numbers only up to 53-bit in size. Check out large numbers’ libraries if you need to deal with numbers larger than that.

The full references of JavaScript and DOM objects are available at Mozilla Developer Network and w3school.

For JS resources such as ECMA specs, check out this list JavaScript Language Resources. As of this writing, the latest JavaScript specification is ECMA-262 Edition 5.1: PDF and HTML.

Another important distinction of JS is that it’s a functional and prototypal language. Typical syntax for function declaration looks like this:

1 function Sum(a,b) {

2 var sum = a+b;

3 return sum;

4 }

5 console.log(Sum(1,2));

Functions in JavaScript are first-class citizens due to the functional programming nature of the language. Therefore, functions can be used as other variables/objects; for example, functions can be passed to other functions as arguments:

1 var f = function (str1){

2 return function(str2){

3 return str1+' '+str2;

4 };

5 };

6 var a = f('hello');

7 var b = f('goodbye');

8 console.log((a('Catty'));

9 console.log((b('Doggy'));

It’s good to know that there are several ways to instantiate an object in JS:

· Classical inheritance pattern

· Pseudo classical inheritance pattern

· Functional inheritance pattern

For further reading on inheritance patterns, check out Inheritance Patterns in JavaScript and Inheritance revisited.

More information about browser-run JavaScript is available at Mozilla Developer Network, Wikipedia and w3schools.

1.2 Agile Methodologies

The Agile software development methodology evolved due to the fact that traditional methods like Waterfall weren’t good enough in situations of high unpredictability, i.e., when the solution is unknown. Agile methodology includes Scrum/Sprint, Test-Driven Development, Continuous Deployment, Paired Programming and other practical techniques, many of which were borrowed from Extreme Programming.

1.2.1 Scrum

In regard to the management, Agile methodology uses Scrum approach. More about Scrum can be read at:

· Scrum Guide in PDF

· Scrum.org

· Scrum development Wikipedia article

The Scrum methodology is a sequence of short cycles, and each cycle is called sprint. One sprint usually lasts from one to two weeks. A typical sprint starts and ends with a sprint planning meeting where new tasks are assigned to team members. New tasks cannot be added to the sprint in progress; they can be added only at the sprint meetings.

An essential part of the Scrum methodology is the daily scrum meeting — hence the name. Each scrum is a 5-to-15-minutes-long meeting which is often conducted in the hallways. In scrum meetings, each team member answers three questions:

1. What have you done since yesterday?

2. What are you going to do today?

3. Do you need anything from other team members?

Flexibility makes Agile an improvement over Waterfall methodology, especially in situations of high uncertainty, i.e., in startups.

The advantage of Scrum methodology: effective where it is hard to plan ahead of time, and also in situations where a feedback loop is used as a main decision-making authority.

1.2.2 Test-Driven Development

Test-Driven Development, or TDD, consists of the following steps:

1. Write failing automated test cases for new feature/tasks or enhancement by using assertions that are either true or false.

2. Write code to successfully pass the test cases.

3. Refactor code if needed, and add functionality while keeping the test cases passed.

4. Repeat until all tasks are complete.

Tests can be split into functional and unit testing. The latter is when a system tests individual units, methods and functions with dependencies mocked up, while the former (a.k.a., integration testing) is when a system tests a slice of a functionality, including dependencies.

The advantages of Test-Driven Development:

· Fewer bugs/defects

· More efficient codebase

· Confidence that code works and doesn’t break the old functionality

1.2.3 Continuous Deployment and Integration

Continuous Deployment, or CD, is the set of techniques to rapidly deliver new features, bug fixes, and enhancements to the customers. CD includes automated testing and automated deployment. By utilizing Continuous Deployment, the manual overheard is decreased and the feedback loop time is minimized. Basically, the faster a developer can get the feedback from the customers, the sooner the product can pivot, which leads to more advantages over the competition. Many startups deploy multiple times in a single day in comparison to the 6-to-12-month release cycle which is still typical for corporations and big companies.

The advantages of the Continuous Deployment approach: decreases feedback loop time and manual labor overhead.

The difference between Continuous Deployment and Continuous Integration is outlined in the post Continuous Delivery vs. Continuous Deployment vs. Continuous Integration - Wait huh?

Some of the most popular solutions for Continuous Integration:

· Jenkins: An extendable open source continuous integration server

· CircleCI: Ship better code, faster

· Travis CI: A hosted continuous integration service for the open source community

1.2.4 Pair Programming

Pair Programming is a technique when two developers work together in one environment. One of the developers is a driver, and the other is an observer. The driver writes code, and the observer assists by watching and making suggestions. Then they switch roles. The driver has a more tactical role of focusing on the current task. In contrast, the observer has a more strategic role, overseeing “the bigger picture” and finding bugs and ways to improve an algorithm.

The advantages of Paired Programming:

· Pairs attributes to shorter and more efficient codebase, and introduces fewer bugs and defects.

· As an added bonus, knowledge is passed along programmers as they work together. However, situations of conflicts between developers are possible, and not uncommon at all.

1.3 Back-End Definitions

1.3.1 Node.js

Node.js is an open-source event-driven asynchronous I/O technology for building scalable and efficient web servers. Node.js consists of Google’s V8 JavaScript engine and is maintained by cloud company Joyent.

The purpose and use of Node.js is similar to Twisted for Python and EventMachine for Ruby. The JavaScript implementation of Node was the third one after attempts at using Ruby and C++ programming languages.

Node.js is not in itself a framework like Ruby on Rails; it’s more comparable to the pair PHP+Apache. More on Node.js frameworks later in the Node.js and MongoDB chapter.

The advantages of using Node.js:

· Developers have high likelihood of familiarity with JavaScript language due to its status as a de facto standard for web and mobile development

· One language for front-end and back-end development speeds up the coding process. A developer’s brain doesn’t have to switch between different syntaxes. So-called context switch. The learning of methods and classes goes faster.

· With Node.js, you could prototype quickly and go to market to do your customer development and customer acquisition early. This is an important competitive advantage over the other companies, which use less agile technologies, e.g., PHP and MySQL.

· Node.js is built to support real-time applications by utilizing web-sockets.

For more information go to Wikipedia, Nodejs.org, and articles on ReadWrite and O’Reilly.

For the current state of Node.js as of this writing, refer to State of the Node slides by Isaac Z. Schlueter – 2013.

1.3.2 NoSQL and MongoDB

MongoDB, from huMONGOus, is a high-performance no-relationship database for huge quantities of data. The NoSQL concept came out when traditional Relational Database Management Systems, or RDBMS, were unable to meet the challenges of huge amounts of data.

The advantages of using MongoDB:

· Scalability: due to a distributed nature, multiple servers and data centers can have redundant data.

· High-performance: MongoDB is very effective for storing and retrieving data, partially owing to the absence of relationships between elements and collections in the database.

· Flexibility: a key-value store is ideal for prototyping because it doesn’t require developers to know the schema and there is no need for a fixed data models, or complex migrations.

1.3.3 Cloud Computing

Could computing consists of:

· Infrastructure as s Service (IaaS), e.g., Rackspace, Amazon Web Services

· Platform as a Service (PaaS), e.g., Heroku, Windows Azure

· Backend as a Service (BaaS — newest, coolest kid on the block), e.g., Parse.com, Firebase

· Software as a Service (SaaS), e.g., Google Apps, Salesforce.com

Cloud application platforms provide:

· Scalability, e.g., spawn new instances in a matter of minutes;

· Ease of deployment, i.e., to push to Heroku you can just use $ git push

· Pay-as-you-go plans where users add or remove memory and disk space based on demands

· Add-ons for easier installation and configuration of databases, app servers, packages, etc.

· Security and support

PaaS and BaaS are ideal for prototyping, building minimal viable products (MVP) and for early-stage startups in general.

Here is the list of most popular PaaS solutions:

· Heroku

· Windows Azure

· Nodejitsu

· Nodester

1.3.4 HTTP Requests and Responses

Each HTTP Request and Response consists of the following components:

1. Header: information about encoding, length of the body, origin, content type, etc.

2. Body: content, usually parameters or data which is passed to the server or sent back to a client

In addition, the HTTP Request contains:

· Method: There are several methods with the most common being GET, POST, PUT and DELETE

· URL: host, port, path, e.g., https://graph.facebook.com/498424660219540

· Query string: everything after a question mark in the URL (e.g., ?q=rpjs&page=20)

1.3.5 RESTful API

RESTful (REpresentational State Transfer) API became popular due to the demand in distributed systems whereby each transaction needs to include enough information about the state of the client. In a sense, this standard is stateless because no information about the clients’ states is stored on the server, thus making it possible for each request to be served by a different system.

Distinct characteristics of RESTful API:

· Has better scalability support due to the fact that different components can be independently deployed to different servers

· Replaced Simple Object Access Protocol (SOAP) because of the simpler verb and noun structure

· Utilizes HTTP methods: GET, POST, DELETE, PUT, OPTIONS, etc.

Here is an example of simple Create, Read, Update and Delete (CRUD) REST API for Message Collection:

Method

URL

Meaning

GET

/messages.json

Return list of messages in JSON format

PUT

/messages.json

Update/replace all messages and return status/error in JSON

POST

/messages.json

Create new message and return its id in JSON format

GET

/messages/{id}.json

Return message with id {id} in JSON format

PUT

/messages/{id}.json

Update/replace message with id {id}, if {id} message doesn’t exists create it

DELETE

/messages/{id}.json

Delete message with id {id}, return status/error in JSON format

REST is not a protocol; it is an architecture in the sense that it’s more flexible than SOAP, which is a protocol. Therefore, REST API URLs could look like /messages/list.html or /messages/list.xml in case we want to support these formats.

PUT and DELETE are idempotent methods, which means that if the server receives two or more similar requests, the end result will be the same.

GET is nullipotent and POST is not idempotent and might affect state and cause side-effects.

Further reading on REST API can be found at Wikipedia and A Brief Introduction to REST article.