This document provides an overview of a web application development course. It discusses the anatomy and architecture of web applications, including client-side and server-side components. It describes how technologies like Ajax, HTML5, cloud computing, and software as a service have changed web development. The course will focus on client-side development using JavaScript and HTML5, and server-side development using Python and Django. To succeed, students are advised to actively participate in class, experiment hands-on, and start assignments and projects early.

1. 15-347
Web Application Development
Thierry Sans

2. Why are you here?

3. What are the web applications
that you use?

4. Let’s look at some web applications

5. Anatomy of a web application

6. Architecture of a Web Application
Client Side Server Side
Web Browser Web Server Database

7. Web Technologies
Content
Presentation Resources
management
Client Side
Processing
Multimedia

8. The evolution of
web applications

9. The Virtuous Circle
faster, better technology
new usage

10. How web technologies have changed?

11. How web technologies have changed?
• Ajax (interactivity)
• HTML 5 (multimedia)
Better
Standards

12. How web technologies have changed?
• Ajax (interactivity) • Homogeneous implementation of
the standards
• HTML 5 (multimedia)
• Increasing speed of rendering and
Javascript engines
Better Better
Standards Browsers

13. How web technologies have changed?
• Ajax (interactivity) • Homogeneous implementation of
the standards
• HTML 5 (multimedia)
• Increasing speed of rendering and
Javascript engines
Better Better
Standards Browsers
Better
Development
Tools
• Web-oriented languages
• Web frameworks

14. Consequence 1 (of 2)
➡ The application is moving from the server to the client
✓ Rich Content

15. Traditional Web Platform
Client Side Server Side
Web Browsers Web Server Database

16. Modern Web Platform
Client Side Server Side
Smartphones and Tablets Web Server Database

17. Consequence 2
➡ Data storage and data processing are moving from the
desktop to the cloud
๏ Cloud Computing

18. • Cloud computing
and are BOOMING!
Software as a Service (SaaS)
“More than 95% of organizations expect to maintain or
grow their use of software as a service (SaaS)”
source Gartner “User Survey Analysis: Software as a Service, Enterprise Application Markets, Worldwide, 2010”

19. Customer Resources Management
Accounting and Billing
Collaboration
E-Learning Web Portals
Content Management
Planning
E-Health

20. Where Web Applications are going
Rich Content
+
Cloud Computing
=
A new way to think about software
Web Technologies are at the heart of this change

21. Emerging Web Platform
Client Side Server Side
Web-based Operating System Web Server Database

22. About this course

23. What you will learn in this course?
✓ Web development
• The foundations of web programming
• The new trend in web application development
๏ Web design

26. History of this course
• Course delivered in Pittsburgh
by Jeff Eppinger and Anthony Tomasic
• Undergraduate and graduate course
• Extremely popular
• Based on Java

27. ... but this course will be all new!
➡ You are going to be part of an experimentation
✓ More emphasize on client side web development
(Javascript and HTML 5)
✓ New programming language: Python/Django (server side)
✓ More emphasize on web security

28. Course Syllabus
• Let’s look at the course webpage
http://www.qatar.cmu.edu/~tsans/15437/

29. How to succeed in this class?

30. How to succeed in this class?
• Come to class (fully awaken)

31. How to succeed in this class?
• Come to class (fully awaken)
• Do not rely on the slides

32. How to succeed in this class?
• Come to class (fully awaken)
• Do not rely on the slides
• Be curious, experiment, get your hands dirty

33. How to succeed in this class?
• Come to class (fully awaken)
• Do not rely on the slides
• Be curious, experiment, get your hands dirty
• Start homework early ... when it is about time

34. How to succeed in this class?
• Come to class (fully awaken)
• Do not rely on the slides
• Be curious, experiment, get your hands dirty
• Start homework early ... when it is about time
• Start thinking about your project now

35. Ready to start?