Feature Driven Agile Oriented Web Applications

Ram G Athreya

Why is Web Dev important

– More and more major businesses and industries are being run on software and delivered as online services (Web Applications)

– Six decades into the computer revolution, four decades since the invention of the microprocessor, and two decades into the rise of the modern Internet, all of the technology required to transform industries through software finally works and can be widely delivered at global scale.

– In 2000 cost of running a Web Application was $150,000 now it is around $1,500 a month

• Why Software is eating the world(By MARC ANDREESSEN)

Why is Web Dev important

– The world’s largest retailer today is Amazon its core capability is software (not procurement or supply chains etc)

– Largest video service is Netflix (in US) which is also a Software Company not a Cable related company

– Major music companies are Spotify & iTunes not a record label

The List goes on• Retail – Amazon Software• Communication – Whatsapp, Facebook• Games – Zynga, Rovio• Entertainment – Spotify, iTunes, Pandora,

Netflix• Photography – Flickr • Advertising/Marketing – Google • Telecom – Skype• Recruiting – Naukri, LinkedIn, Monster

Also Physical Industries• Cars – Android Auto, Apple AirPlay• Real World Retailer – Wal-Mart (its core is S/W)• Marketplaces – EBay• Couriers – FedEx & UPS (powered by S/W &

smart analytics)• Banks – All banks have moved online• Healthcare & Education are next on the list• Health – Fitness apps, Healthkit & wearables• Education – Online platforms (Coursera, Udemy)

Challenges

• First of all, every new company today is being built in the face of massive economic headwinds, making the challenge far greater than it was in the relatively benign '90s.

• Secondly, many people in the U.S. and around the world lack the education and skills required to participate in the great new companies coming out of the software revolution.

Agenda

• Cover the whole spectrum of web application development

• Current cutting edge technology that is widely used

• Suitable example that will make understanding easier

Problem Statement

• Develop a single page stock market app• Features– Search Bar– Current stock price & G/L– Graph– Additional details such as Volume etc– News related to the stock– Send to E-Mail

• Ideally should also work in mobile

Wireframe

Web Dev Architecture

Web Dev Architecture

• Backend– Handle HTTP Requests & generate responses– Communicate with database– Communicate with third party APIs

• Frontend– Communicate with server– Display content from server responses– Presentation of content & user interactivity

Backend Stack

• Server side language• Web Framework• DBMS• Server• Environment (OS)

Server Side Technologies

PHP Frameworks

PHP Frameworks Performance

DBMS

Server

Environment

The LAMP Stack

• Linux

• Apache

• MySQL

• Php

Why we need a Web Framework

• MVC Architecture• URL Mapping• Web Templates & theming• Easy Database Connectivity• User management• Data Persistence• Security• Caching

MVC Architecture

• Model

• View

• Controller

MVC in Yii

MVC Workflow in Yii

Application

• The application object encapsulates the execution context within which a request is processed

• Its main task is to collect some basic information about the request, and dispatch it to an appropriate controller for further processing.

URL Mapping

• Pattern matching• Creating user friendly URLs

Web Templates & theming

Easy Database Connectivity

• Built on top of PHP Data Objects

Easy Database Connectivity

ORM

• Object-relational mapping in computer software is a programming technique for converting data between incompatible type systems in object-oriented programming languages. This creates, in effect, a "virtual object database" that can be used from within the programming language.

ORM

• Student Table– Student ID– Name– Teacher ID

• Teacher Table– Teacher ID– Name

ORMclass student{

public $student_id;public $name;public $teacher_id;public function rules(){

return array( array(’name', 'validateName'), // Custom validation method in this object);

} public function relations() { return array( ’Teacher' => array(self::HAS_MANY, ’teacher', ’teacher_id'), ); }}

ORM

• $student = Student::model()->findByPk(1);• var_dump($student->student_id)• var_dump($student->name);• var_dump($student->teacher_id);

Active Record• Active record is an architectural pattern found

in software that stores its data in relational databases.

• A database table or view is wrapped into a class

• This pattern is commonly used by object persistence tools, and in object-relational mapping (ORM)

• Typically, foreign key relationships will be exposed as an object instance of the appropriate type via a property.

Active Record

• $student = Student::model()->findByPk(1);• var_dump($student->Teacher->name);

User management

• Yii provides built in user management, access control & authentication mechanisms

• By default a user table can used to provide access to users

Data Persistence

• Generally used for session handling

Security

• Cross Site Scripting Prevention (OWASP Top 10)

• CSRF Prevention (OWASP Top 10)• Cookie Attack Prevention

Caching

Setup

• cd WebRoot• php YiiRoot/framework/yiic.php webapp webapp-name• .htaccess configuration

RewriteEngine onRewriteBase /

RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_URI} !\.(png|gif|ico|swf|jpe?g|js|css|ttf|svg|eot|woff)$ [NC]RewriteRule . index.php

Gii

http://hostname/testdrive/index.php?r=gii

Frontend Stack

• HTML – Content• CSS – Presentation• JS – Interactivity• CSS Preprocessor• Javascript Framework• Responsive Design

Web Debugging Tools

• Chrome Web Inspector• Firebug for Firefox

CSS Preprocessor

CSS Overview• Inline• Internal• External• CSS hierarchy• !important Rule• CSS Inheritance• CSS3 Transitions• CSS3 Transforms• CSS3 Animations

Inline

Internal

External

CSS Hierarchy

• External < Internal < Inline

!important Rule

CSS Inheritance

CSS3 Transitions

CSS3 Transforms

CSS3 Animations

Features of CSS Preprocessors

• Variables• Mixins• Nested Rules• Media query bubbling• Operations• Functions• Importing

Variables

Mixins

Nested Rules

Media query bubbling

Operations

Functions

Importing

Vector Icons

• Icomoon.io• Fontastic

Importance of UI/UX

• The goal of user interface design is to make the user experience and interaction with your system as simple and efficient as possible

• A good experience leads to more user satisfaction & better conversions or purchases

Fedex Logo

• Won over 40 design awards• Rated as one of the best designs focusing on

negative space• Once you understand the significance you will

never forget the brand

Skeumorphism vs Flat Design

WIMP Model

• Windows

• Icons

• Menus

• Pointer

A/B Testing

Javascript Frameworks

JS Overview

• JS Event Loop• Objects• Callbacks• Closures• Prototypes• Inheritance

JS Event Loop

Objects

• Short Quiz – Which of these is an object in JS?– Object– Function– ArrayYes it is a trick question

Callbacks

• Used for Asynchronous Execution

Closures

Prototypes

Inheritance

• Prototypal inheritance i.e there are no classes• Instead the focus is on objects• You start by making a useful object. You can

then make many more objects that are like that one.

• So once we have an object that we like, we can make more instances with the

Object.create() method

Inheritance

Features of JS Frameworks• DOM Element Selection• DOM Traversal & Modification• DOM manipulation• Events• Effects & Animations• AJAX• JSON Parsing• Extensibility• Utilities

DOM Element Selection

• $(selector)• Selectors can be– ID– Class– Psuedo selectors

DOM Traversal & Modification

• .each()• .find()• .filter()• .first()• .last()• .next()• .previous()

DOM Manipulation

• .after()• .appendTo()• .attr()• .before()• .clone()• .css()• .empty()

Events

• .bind()• .unbind()• .change()• .click()• .error()• .focus()• .keyup()

Effects & Animations

• .animate()• .fadeIn()• .fadeTo()• .hide()• .show()• .slideUp()• .slideDown()

AJAX

• URL• Settings– async– contentType– data– dataType– error– success

AJAX

JSON Parsing

Extensibility

• jQuery supports easy creation of plugins to enhance the functionality and features provided by jQuery

Utilities

• .browser()• .extend()• .inArray()• .isArray()• .isEmptyObject()• .isFunction()• .isNumeric()

Recap• Understood why web development is

important• Defined a problem to delve deeper into this

field• Overview on Backend Development• Overview on Frontend Development• Web Debugging

HTML5 APIs

• localStorage• Application Cache• GeoLocation

localStorage

• Easy mechanism to store data within the browser

• More secure & faster than cookies• Data stored as key/value pairs• Data is domain specific

Application Cache

Application cache gives three advantages• Offline browsing - users can use the

application when they're offline• Speed - cached resources load faster• Reduced server load - the browser will only

download updated/changed resources from the server

Including Cache

Manifest FileManifest file has 3 sections• CACHE MANIFEST - Files listed under this

header will be cached after they are downloaded for the first time

• NETWORK - Files listed under this header require a connection to the server, and will never be cached

• FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible

Example Manifest File

Geolocation

• The HTML5 Geolocation API is used to get the geographical position of a user.

• Since this can compromise user privacy, the position is not available unless the user approves it.

Responsive Web Design(RWD) Motivations

• RWD is a web design approach aimed at crafting sites to provide an optimal viewing experience– easy reading and navigation – minimum of resizing, panning, and scrolling– across a wide range of devices (from mobile

phones to desktop computer monitors)

RWD Approach

• The fluid grid concept (percentages over pixels)

• Flexible images• Media Queries

Growth of Mobile

RWD Frameworks

Bootstrap File Structure

Features

• Scaffolding• Base CSS• Components• Javascript Plugins

CDN

• A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet.

• The goal of a CDN is to serve content to end-users with high availability and high performance.

CloudFlare

LINUX Overview

• Created by Linus Torvalds in 1991• Directory Structure• Access Control & User groups• Man Pages

Directory Structure

Access Control & User Groups

• Root User• User Directories• Admin Groups• Sudo

Chmod

Chown

• Changes ownership of the file or directory

Chgrp

• Changes Group of the file or directory

Man Pages

• Manual pages or help command provided by the OS

• Contains a synopsis of the command with relevant example

Crons

Crons

Apache Configuration

• Start, Stop & Shutdown• Vhosts configuration• Mod Rewrite Configuration• Basics of .htaccess configuration

Vhosts Configuration

Mod Rewrite Configuration

.htaccess

RewriteEngine onRewriteBase /deny from <ip address>

MySQL

• RDBMS• Tables• Joins• Procedures• Views• Triggers

Tools

• Netbeans• MySQL Workbench• Terminal• LESS.app• Chrome Web Inspector

Testing

• Test Driven Development• Server side testing– PHP Unit

• Client side testing– Jasmine

Version Control Motivations

• Enabling simultaneous work• Collaboration• Archiving every version• Easy to track changes

History of version control

Deployment

• PAAS vs IAAS• IAAS App Deployment• PAAS App Deployment• Heroku• 12 Factor App

PAAS vs IAAS

IAAS App Deployment

PAAS App Deployment

Heroku

• Heroku is a cloud platform as a service (PaaS) supporting several programming languages

• Heroku was acquired by Salesforce.com in 2010

• The base Operating System is Debian based Ubuntu(LINUX)

• Provides an easy to use platform for deploying applications

12 Factor App

• Codebase• Dependencies• Config• Backing Services• Build, Release & Run• Processes• Port Binding• Concurrency

12 Factor App

• Disposability• Dev/Prod Parity• Logs• Admin Processes

Developer Workflow

Development Process

Continuous Integration• Maintain a code repository• Automate the build• Make the build self testing• Everyone commits to the baseline• Keep builds fast• Test in a clone environment• Make it easy to get latest deliverables• Everyone can see the results of the latest build• Automate Deployment

Future Technologies• Linux – VMs(probably a stripped version of

LINUX)• Apache – End Point based programming• MySQL – NoSQL(MongoDB, Redis)• PHP – Node.js• jQuery – Angular, Backbone etc• SVN – Git• LESS – Don’t see a lot of change here• RWD more widely adopted

Thank You