This document provides a whirlwind tour of software development topics including common terminology like front-end vs back-end, languages vs frameworks. It describes the basic building blocks of a web application like HTML, CSS, JavaScript and how they are tied together by the DOM. Common technology stacks that pair languages like Java, PHP and Ruby with frameworks and databases are also outlined. The document concludes by suggesting ways for developers to take their skills to the next level in areas like responsive design, testing, design patterns and preparing applications to scale.

1. A Whirlwind Tour
of Software Development
By Jackie Ta

2. 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!

3. Common Terminology
Front-end vs Back-end
Front-End Back-End
Encompasses anything done on the Encompasses anything done on
browser. This includes: the server. Server-side code
might do any of the following:
• HTML
• CSS • Authentication / authorization
• Javascript • Database updates or retrieval
• Send emails
• Web service calls

4. Common Terminology
Languages 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

5. Common Languages and Frameworks
Javascript C# PHP Ruby
• JQuery • ASP.Net • CakePHP • Rails
• CoffeeScript • MVC • WordPress
• Node.js • Web API • Drupal
• Backbone.js
Java Python Javascript
• Spring • Django • CoffeeScript
• Grails • jQuery
• Pylons
• Node.js

6. 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).

7. Anatomy of a Web Application
The 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.

8. Anatomy of a Web Application
The 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.

9. Common Technology Stacks
Web Server Data Storage Web
Framework
Java C# PHP Ruby
• Apache • IIS • Apache • Passenger
• Oracle • SQL Server • mySQL • mySQL
• Spring • ASP.Net/MVC • CakePHP • Rails

10. 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

11. What NOT to do
(courtesy of xkcd)

12. Take it to the Next Level
Presentation 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)

13. Take it to the Next Level
Testing
• Client-side testing
• Jasmine
• JSUnit
• Unit Testing
• Mocking frameworks
• Integration Testing
• Load testing
• Diagnostic logging and tracing

14. Take it to the Next Level
Development Processes
• Agile (Scrum, Kanban)
• Test-driven development (TDD)
• Behavior-driven development (BDD)
• Continuous integration (CI)
• Pair programming (XP)

15. Take it to the Next Level
Design Patterns
• Planning with security in mind (PCMA
compliance, etc)
• Dependency injection
• Separation of concerns
• Single responsibility principle
• Common patterns (singleton, factory,
repository, etc)

16. Take it to the Next Level
Planning for mobile
• Mobile-enabled web site versus native apps
• Android versus iPhone
• Responsive design
• Paradigm shift (rock versus boulder)

17. Take it to the Next Level
Scaling 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

18. Wrap-up
• Questions?
• Next up: Individual presentations on technology
stacks