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
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
20. Why we need a Web Framework
• MVC Architecture
• URL Mapping
• Web Templates & theming
• Easy Database Connectivity
• User management
• Data Persistence
• Security
• Caching
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.
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'),
);
}
}
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.
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
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
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
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
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
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
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
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.
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
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