The document provides an overview of feature driven agile oriented web applications. It discusses why web development is important as more businesses move online. It also covers challenges in web development and provides an agenda for covering the full spectrum of web app development, including current technologies. The document proposes developing a stock market app as an example project to demonstrate concepts. It includes wireframes and diagrams of the backend and frontend architecture for web apps.

1. Feature Driven Agile Oriented
Web Applications
Ram G Athreya

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

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

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

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

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

7. Agenda
• Cover the whole spectrum of web application
development
• Current cutting edge technology that is widely
used
• Suitable example that will make
understanding easier

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

9. Wireframe

10. Web Dev Architecture

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

12. Backend Stack
• Server side language
• Web Framework
• DBMS
• Server
• Environment (OS)

13. Server Side Technologies

14. PHP Frameworks

15. PHP Frameworks Performance

16. DBMS

17. Server

18. Environment

19. The LAMP Stack
• Linux
• Apache
• MySQL
• Php

20. Why we need a Web Framework
• MVC Architecture
• URL Mapping
• Web Templates & theming
• Easy Database Connectivity
• User management
• Data Persistence
• Security
• Caching

21. MVC Architecture
• Model
• View
• Controller

22. MVC in Yii

23. MVC Workflow in Yii

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

25. URL Mapping
• Pattern matching
• Creating user friendly URLs

26. Web Templates & theming

27. Easy Database Connectivity
• Built on top of PHP Data Objects

28. Easy Database Connectivity

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

30. ORM
• Student Table
– Student ID
– Name
– Teacher ID
• Teacher Table
– Teacher ID
– Name

31. ORM
class 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'),
);
}
}

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

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

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

35. User management
• Yii provides built in user management, access
control & authentication mechanisms
• By default a user table can used to provide
access to users

36. Data Persistence
• Generally used for session handling

37. Security
• Cross Site Scripting Prevention (OWASP Top
10)
• CSRF Prevention (OWASP Top 10)
• Cookie Attack Prevention

38. Caching

39. Setup
• cd WebRoot
• php YiiRoot/framework/yiic.php webapp webapp-name
• .htaccess configuration
RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI}
!.(png|gif|ico|swf|jpe?g|js|css|ttf|svg|eot|woff)$ [NC]
RewriteRule . index.php

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

41. Frontend Stack
• HTML – Content
• CSS – Presentation
• JS – Interactivity
• CSS Preprocessor
• Javascript Framework
• Responsive Design

42. Web Debugging Tools
• Chrome Web Inspector
• Firebug for Firefox

43. CSS Preprocessor

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

45. Inline

46. Internal

47. External

48. CSS Hierarchy
• External < Internal < Inline

49. !important Rule

50. CSS Inheritance

51. CSS3 Transitions

52. CSS3 Transforms

53. CSS3 Animations

54. Features of CSS Preprocessors
• Variables
• Mixins
• Nested Rules
• Media query bubbling
• Operations
• Functions
• Importing

55. Variables

56. Mixins

57. Nested Rules

58. Media query bubbling

59. Operations

60. Functions

61. Importing

62. Vector Icons
• Icomoon.io
• Fontastic

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

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

65. Skeumorphism vs Flat Design

66. WIMP Model
• Windows
• Icons
• Menus
• Pointer

67. A/B Testing

68. Javascript Frameworks

69. JS Overview
• JS Event Loop
• Objects
• Callbacks
• Closures
• Prototypes
• Inheritance

70. JS Event Loop

71. Objects
• Short Quiz – Which of these is an object in JS?
– Object
– Function
– Array
Yes it is a trick question

72. Callbacks
• Used for Asynchronous Execution

73. Closures

74. Prototypes

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

76. Inheritance

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

78. DOM Element Selection
• $(selector)
• Selectors can be
– ID
– Class
– Psuedo selectors

79. DOM Traversal & Modification
• .each()
• .find()
• .filter()
• .first()
• .last()
• .next()
• .previous()

80. DOM Manipulation
• .after()
• .appendTo()
• .attr()
• .before()
• .clone()
• .css()
• .empty()

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

82. Effects & Animations
• .animate()
• .fadeIn()
• .fadeTo()
• .hide()
• .show()
• .slideUp()
• .slideDown()

83. AJAX
• URL
• Settings
– async
– contentType
– data
– dataType
– error
– success

84. AJAX

85. JSON Parsing

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

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

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

89. HTML5 APIs
• localStorage
• Application Cache
• GeoLocation

90. localStorage
• Easy mechanism to store data within the
browser
• More secure & faster than cookies
• Data stored as key/value pairs
• Data is domain specific

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

92. Including Cache

93. Manifest File
Manifest 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

94. Example Manifest File

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

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

97. RWD Approach
• The fluid grid concept (percentages over
pixels)
• Flexible images
• Media Queries

98. Growth of Mobile

99. RWD Frameworks

100. Bootstrap File Structure

101. Features
• Scaffolding
• Base CSS
• Components
• Javascript Plugins

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

103. CloudFlare

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

105. Directory Structure

106. Access Control & User Groups
• Root User
• User Directories
• Admin Groups
• Sudo

107. Chmod

108. Chown
• Changes ownership of the file or directory

109. Chgrp
• Changes Group of the file or directory

110. Man Pages
• Manual pages or help command provided by
the OS
• Contains a synopsis of the command with
relevant example

111. Crons

112. Crons

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

114. Vhosts Configuration

115. Mod Rewrite Configuration

116. .htaccess
RewriteEngine on
RewriteBase /
deny from <ip address>

117. MySQL
• RDBMS
• Tables
• Joins
• Procedures
• Views
• Triggers

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

119. Testing
• Test Driven Development
• Server side testing
– PHP Unit
• Client side testing
– Jasmine

120. Version Control Motivations
• Enabling simultaneous work
• Collaboration
• Archiving every version
• Easy to track changes

121. History of version control

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

123. PAAS vs IAAS

124. IAAS App Deployment

125. PAAS App Deployment

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

127. 12 Factor App
• Codebase
• Dependencies
• Config
• Backing Services
• Build, Release & Run
• Processes
• Port Binding
• Concurrency

128. 12 Factor App
• Disposability
• Dev/Prod Parity
• Logs
• Admin Processes

129. Developer Workflow

130. Development Process

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

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

133. Thank You