feature driven agile oriented web applications
TRANSCRIPT
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