A Whirlwind Tour of Software Development

By Jackie Ta

Topics

• Common terminology• Front-end vs back-end• Languages vs frameworks

• Building blocks of a web application • Common technology stacks and

who uses them• Already coding? Take it to the next

level!

Common TerminologyFront-end vs Back-end

Front-EndEncompasses anything done on the browser. This includes:

• HTML• CSS• Javascript

Back-EndEncompasses anything done on the server. Server-side code might do any of the following:

• Authentication / authorization• Database updates or retrieval• Send emails• Web service calls

Common TerminologyLanguages vs Frameworks

A Framework is a collection of code libraries that encapsulate common or useful functionality.

Common areas of functionality: • Data access• Sessioning• Parsing HTTP objects • Caching• Templating

Common Languages and Frameworks

Javascript

• JQuery• CoffeeScript• Node.js• Backbone.js

C#

• ASP.Net• MVC• Web API

PHP

• CakePHP• WordPress• Drupal

Ruby

• Rails

Java

• Spring• Grails

Python

• Django• Pylons

Javascript

• CoffeeScript• jQuery• Node.js

Anatomy of a Web Application

• Content -> HTML• Styling -> CSS• Action -> Javascript(There is some blurring of roles. Html can contain styling. CSS can animate as well as style. Javascript is often used for dynamic styling.)

They are all tied together by the DOM (Document Object Model).

Anatomy of a Web ApplicationThe DOM

The (D)ocument (O)bject (M)odel is a hierarchical mapping of the web page by the browser.

Anything surrounded by HTML tags (elements) goes into the DOM. Also, all elements denoted by « class » or « id » attributes goes into the DOM. You cannot « act » on an element (via Javascript) till it is put in the DOM.

The DOM is built from top to bottom. Learning how the DOM loads is very helpful for performance-tuning your page.

Anatomy of a Web ApplicationThe DOM (cont’d)

Consider the following tag:<div id=« titleSection »>Funny Headline</div>

You can access this either by the id attribute or by tag name.In CSS:

#titleSection { color: red; }Or div { color: red; }

In Javascript:document.getElementById(« titleSection »).click();Or document.getElementsByTagName(« div »)

They all work by accessing the DOM.

Common Technology Stacks

Java

• Apache• Oracle• Spring

C#

• IIS• SQL Server• ASP.Net/MVC

PHP

• Apache• mySQL• CakePHP

Ruby

• Passenger• mySQL• Rails

Web Server Data Storage Web Framework

Evolution of Design Patterns

• Trends• More capable browsers• Faster internet connections• Need to support multiple devices• One giant page• Separating style from content -> CSS• Add client dynamics -> Javascript (ecma script)• Adding server dynamics• Moving presentation logic back to client

What NOT to do(courtesy of xkcd)

Take it to the Next LevelPresentation Layer

• Better style • LESS or SASS for less repetitive code• Responsive design using Media Queries

• Faster and more dynamic pages• Ajax• Javascript frameworks (e.g., jQuery, node.js)• Javascript templating• Consolidate and minify style and script files

• Planning for search engine optimization (SEO)

Take it to the Next LevelTesting

• Client-side testing• Jasmine• JSUnit

• Unit Testing• Mocking frameworks• Integration Testing• Load testing• Diagnostic logging and tracing

Take it to the Next LevelDevelopment Processes

• Agile (Scrum, Kanban)• Test-driven development (TDD)• Behavior-driven development (BDD)• Continuous integration (CI)• Pair programming (XP)

Take it to the Next LevelDesign Patterns

• Planning with security in mind (PCMA compliance, etc)

• Dependency injection• Separation of concerns• Single responsibility principle• Common patterns (singleton, factory,

repository, etc)

Take it to the Next LevelPlanning for mobile

• Mobile-enabled web site versus native apps• Android versus iPhone• Responsive design• Paradigm shift (rock versus boulder)

Take it to the Next LevelScaling Up

• Caching• Message queuing (fire and forget)• Working in parallel (async processing)• Moving more work to browser• Database tuning• Load balancing• Moving to the cloud

Wrap-up

• Questions?• Next up: Individual presentations on technology

stacks