Web Frameworks              web development done rightCourse of Web TechnologiesA.A. 2010/2011              Valerio Maggio...
Outline                                         2► Web technologies evolution► Web frameworks  ○ Design Principles► Case S...
Intruduction                                               3► Nowadays frameworks has become a  buzzword  ○ Software frame...
1. Web Technologies     Evolution                      4
Web: Evolution Roadmap            1                                5       HTML Pages HTML Pages:►Web developers wrote eve...
Web: Evolution Roadmap       HTML Pages        2                         6                    CGI Scripting CGI – Common G...
CGI Perl Example                                            7► What are pros and cons of these two CGI examples ?
Web: Evolution Roadmap                   CGI Scripting        3               8      HTML Pages                   PHP like...
JSP Example: Pros and Cons ?                               9
Web: Evolution Roadmap                                 PHP, ASP, JSP, ...   4                         10        HTML Pages...
CMS: Content ManagementSystem                                         11► Aim to manage work-flows and contents in a  coll...
Web frameworks                                                     12► Aim to alleviate the overhead associated with  comm...
So, What is a Web Framework?                                                                     13► What does this code d...
Web Frameworks in a nutshell                                               14► These problems are exactly what a web  fram...
2. Web Frameworks Design        Principles                           15
CGI Architecture Model                                          16 Presentation and        Business Logic Visualization   ...
CGI Architecture Model                                                    17► Task centric architecture (a.k.a. Model 1)  ...
Model 1 Architecture (Java)                                              18 ► Processing delegates as JSP and Servlets ► I...
MVC Architecture Model                                                                      19                            ...
Web-MVC Architecture Model                                                                  20                            ...
Model 2 Architecture (Java)                                             21                         ► Model:               ...
Fulll-stack web frameworks                                                       22► From Python.org wiki: [..] frameworks...
Web Frameworks Capabilities                                           23► View  ○ JavaScript Library  ○ Template Engine an...
Database Access                                                 24► Distributed Access  Logic (JSP, Servlets)   ► Centrali...
Active Record pattern                               25                           ► An object                             e...
Heavy-weight vs Light-weightFrameworks                                             26► Heavy-weight frameworks:  ○ (Mostly...
H-W Java frameworks: Struts                              27
H-W Java frameworks: Hibernate                                 28
Design Principles                                                                      29► Convention over configuration  ...
3. Case Study:   Django andGoogle App Engine                    30
Frameworks and Languages                           31
Python Programming Language                                                          32“Speed and flexibility of developme...
Python Programming Language                                         33► Is there someone that uses  python in professional...
Python:Language of the year 2010                                                          34Programming language Python ha...
TIOBE: Programming Languagesranking                              35              http://www.tiobe.com
Python Dynamic Typing                                               36 “Duck Typing”           def half (n):              ...
Django web framework                  37Design characteristics► Model-View-Controller for the Web► Written in Python► Expl...
Django Architecture Model                                                      38► Django is based on a slightly different...
Django Stack               39► Database wrapper (ORM)► URL dispatcher► Template system► Admin Framework► I18n & l10n► Auth...
Projects and Applications                                                   40► Projects:   ○ Composed by different applic...
URL Dispatcher                                41► Loose coupling principle between URLs and Views ○ Based on regular expre...
Template Language                                          42► Very restrictive specific-language  ○ Allows only presentat...
Template Language (2)► Template Inheritance                43 ○ Templates are composed by Blocks
Template Language (3)                                                      44► Variables: {{    variable_name }}► Tags: {%...
Django Admin Framework                                        45►So called Killer-application►Compliant with Active record...
Django Included Apps                                                              46► django.contrib.auth  ○ An authentica...
Google App Engine                                                       47► dynamic web serving (built on top of Django)  ...
References: Google App Engine                                      48► http://code.google.com/appengine/
References: Django                                                  49► http://www.djangoproject.com/   ○ Sito del Progett...
References: Python                                                                50► http://www.python.org   ○ Sito uffic...
References: Titles                                            51                     ► The definitive guide to            ...
References: Titles                                          52                     ► Sviluppare                       appl...
References: Titles                                        53                     ► Python,                       Marco Ber...
References: Titles                                           54                     ► Programming Google                  ...
And last...             55►Want to get some actions?►Lets do together a working example
Upcoming SlideShare
Loading in...5
×

Web frameworks

3,231

Published on

Web frameworks: web development done right.

Lecture of Web Technologies, University of Naples Federico II

Main topics:
- Evolution of Web Technolgies
- Web frameworks and Design Principles
- Django and Google App engine: web frameworks in Python

Published in: Technology, Education
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,231
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
45
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Web frameworks

  1. 1. Web Frameworks web development done rightCourse of Web TechnologiesA.A. 2010/2011 Valerio Maggio, PhD Student Prof.ssa Anna Corazza
  2. 2. Outline 2► Web technologies evolution► Web frameworks ○ Design Principles► Case Study ○ Django and GAE (Google App Engine)► Working Example
  3. 3. Intruduction 3► Nowadays frameworks has become a buzzword ○ Software framework ○ Web framework ○ Development framework ○…► So, what do you expect a web framework is?
  4. 4. 1. Web Technologies Evolution 4
  5. 5. Web: Evolution Roadmap 1 5 HTML Pages HTML Pages:►Web developers wrote every page “by hand”►Update a web site means editing HTML►“redesign” involved redoing every page ○ One at a time►Solution not scalable
  6. 6. Web: Evolution Roadmap HTML Pages 2 6 CGI Scripting CGI – Common Gateway Interface► (+) Pages intended as resources ○ Pages are generated dynamically on demand ○ Raise of (so called) server side technologies► (-) Code reuse difficult ○ Lot of “boilerplate” code► (-) High learning curve
  7. 7. CGI Perl Example 7► What are pros and cons of these two CGI examples ?
  8. 8. Web: Evolution Roadmap CGI Scripting 3 8 HTML Pages PHP like languages PHP like solutions► (+) Learning curve extremely shallow ○ Code directly embedded into HTML► (-) No security and/or protection mechanism provided► (?) Bunch of HTML, (Business Logic) Code, (Data) SQL code all together
  9. 9. JSP Example: Pros and Cons ? 9
  10. 10. Web: Evolution Roadmap PHP, ASP, JSP, ... 4 10 HTML Pages CGI Scripting RIA and “Integrated solutions” RIA and “Integrated Solutions”► RIA: Rich Internet Applications ○ Q: Do you know what RIA means? ○ A: Desktop-like web applications ● (Ajax and javascript intensive web apps)► A.k.a. Solutions battery included► CMS and Web Frameworks
  11. 11. CMS: Content ManagementSystem 11► Aim to manage work-flows and contents in a collaborative environment► Designed to simplify the publication of contents to web sites and mobile devices► Examples: Joomla, Drupal, Wordpress, ….
  12. 12. Web frameworks 12► Aim to alleviate the overhead associated with common Web development ○ Databases, templates, sessions, …► Designed to support the development of dynamic websites, web applications and web services► Examples: Struts, Spring, Ruby on Rails, Django, Google App Engine, ...
  13. 13. So, What is a Web Framework? 13► What does this code do?► What happens when multiple pages need to connect to database?► Should a developer really have to worry about printing the Content-type?► Is this code reusable in multiple environments with different DB connection parameters?►What happens when a web designer have to redesign the page?
  14. 14. Web Frameworks in a nutshell 14► These problems are exactly what a web frameworks tries to solve► Web frameworks provides a programming infrastructure for applications► Focus on developing code without having to reinvent the wheel
  15. 15. 2. Web Frameworks Design Principles 15
  16. 16. CGI Architecture Model 16 Presentation and Business Logic Visualization Data and Models
  17. 17. CGI Architecture Model 17► Task centric architecture (a.k.a. Model 1) ○ Difficult reusability and maintenance of code ○ Requires different skill-sets High coupling among:► Presentation (View) ○ How to show data► Processing (Controller) ○ What information to show► Data Acquisition (Model) ○ What information to extract (from DB)
  18. 18. Model 1 Architecture (Java) 18 ► Processing delegates as JSP and Servlets ► Is there any difference between CGI and Servlet?
  19. 19. MVC Architecture Model 19 ► Model: ○ Manages domain and data acquisition ► View: ○ Manages the visualization of data ► Controller: ○ Manages domain and data processingQ: Do you think this model is feasible to be used on the web as is?
  20. 20. Web-MVC Architecture Model 20 ► Model: ○ Manages domain and data acquisition ► View: ○ Manages the visualization of data ► Controller: ○ Manages domain and data processingA: No (direct) relationship between the view and the model
  21. 21. Model 2 Architecture (Java) 21 ► Model: ○ EJB and Javabeans ► View: ○ JSP and JFaces ► Controller: ○ Servlets
  22. 22. Fulll-stack web frameworks 22► From Python.org wiki: [..] frameworks provide support for a number of activities such as interpreting requests, producing responses, storing data persistently, and so on. [..] those frameworks [..] are often known as full- stack frameworks in that they attempt to supply components for each layer in the stack.► So, what are such components?
  23. 23. Web Frameworks Capabilities 23► View ○ JavaScript Library ○ Template Engine and View Composition ○ Development Server► Controller ○ URL Routing ○ Controller-view Association► Model ○ Database Abstraction ○ ORM (Object Relational Mapping)
  24. 24. Database Access 24► Distributed Access Logic (JSP, Servlets) ► Centralized Access Logic► Q: How easy is modify the db schema?
  25. 25. Active Record pattern 25 ► An object encapsulates both data and behavior ► Put data access logic in the domain objecthttp://martinfowler.com/eaaCatalog/activeRecord.html
  26. 26. Heavy-weight vs Light-weightFrameworks 26► Heavy-weight frameworks: ○ (Mostly) Java Based ○ Based on Model 2 Architecture ○ High learning curve ○ Bunch of (XML) Configuration Files► Light-weight frameworks: ○ Convention over Configuration and DRY Principles ○ Shallow learning curve ○ Use of Dynamic Languages ● Python, Ruby, Groovy, Scala
  27. 27. H-W Java frameworks: Struts 27
  28. 28. H-W Java frameworks: Hibernate 28
  29. 29. Design Principles 29► Convention over configuration ○ “Convention over Configuration is a programming design that favors following a certain set of programming conventions instead of configuring an application framework. [...]”► DRY (Dont repeat yourself) ○ “DRY is a principle that focuses on reducing information duplication by keeping any piece of knowledge in a system in only one place.
  30. 30. 3. Case Study: Django andGoogle App Engine 30
  31. 31. Frameworks and Languages 31
  32. 32. Python Programming Language 32“Speed and flexibility of development are critical.Dynamic languages let you get more done with less linesof code (which means less bugs)” ► Object oriented languages ► Clean and simple syntax ○ Strong Typed ○ Dynamic Typed
  33. 33. Python Programming Language 33► Is there someone that uses python in professional projects? ○ IBM, Google, Sun, HP, Industrial Light and Magic, NASA, Microsoft► Goggle it: ● site:microsoft.com python ● Youll get more than 9 thousands results
  34. 34. Python:Language of the year 2010 34Programming language Python has become programminglanguage of 2010. This award is given to the programminglanguage that gained most market share in 2010.Python grew 1.81% since January 2010. This is a bit morethan runner up Objective-C (+1.63%).Objective-C was favorite for the title for a long time thanksto the popularity of Apples iPhone and iPad platforms.However, it lost too much popularity the last couples ofmonths.Python has become the "de facto" standard in systemscripting (being a successor of Perl in this), but it is used formuch more different types of application areas nowadays. Source: tiobe.comPython is for instance very popular among web developers,especially in combination with the Django framework.Since Python is easy to learn, more and more universities areusing Python to teach programming languages.
  35. 35. TIOBE: Programming Languagesranking 35 http://www.tiobe.com
  36. 36. Python Dynamic Typing 36 “Duck Typing” def half (n): return n/2.0 Walks like a duck? Quacks like a duck? Q: What is the type of variable n? Its a duck!
  37. 37. Django web framework 37Design characteristics► Model-View-Controller for the Web► Written in Python► Explicit instead of implicit► Loose Coupling► Dont repeat yourself
  38. 38. Django Architecture Model 38► Django is based on a slightly different version of MVC ○ a.k.a. MVT: Model View Template► Model: Domain Objects ○ Python Classes► View: contains business logic for the pages ○ Callback as python functions► Templates: describes the design of the page ○ Template Language HTML based
  39. 39. Django Stack 39► Database wrapper (ORM)► URL dispatcher► Template system► Admin Framework► I18n & l10n► Authentication► RSS► .....
  40. 40. Projects and Applications 40► Projects: ○ Composed by different applications ○ Glued together by unique configuration file► Applications: ○ Set of portable functionalities ○ Code is more reusable ○ Django Plugables ● (djangoplugables.com)
  41. 41. URL Dispatcher 41► Loose coupling principle between URLs and Views ○ Based on regular expressions
  42. 42. Template Language 42► Very restrictive specific-language ○ Allows only presentation operations ○ No logic and/or processing allowed► Less Pythonic ○ Oriented to web designers ○ HTML based► Templates Inheritance Mechanism ○ Code Reuse
  43. 43. Template Language (2)► Template Inheritance 43 ○ Templates are composed by Blocks
  44. 44. Template Language (3) 44► Variables: {{ variable_name }}► Tags: {% template_tag %} ○ Board definition: Tags tell the framework to do something► Filters: {{ variable|filter }} ○ Alters the formatting of variables
  45. 45. Django Admin Framework 45►So called Killer-application►Compliant with Active record Pattern
  46. 46. Django Included Apps 46► django.contrib.auth ○ An authentication system.► django.contrib.contenttypes ○ A framework for content types.► django.contrib.sessions ○ A session framework.► django.contrib.sites ○ A framework for managing multiple sites with one Django installation.► django.contrib.messages ○ A messaging framework.
  47. 47. Google App Engine 47► dynamic web serving (built on top of Django) ○ e.g. supports Django Templating Language► persistent storage► automatic scaling and load balancing► APIs for authenticating ○ using Google Accounts► a fully featured local development environment► scheduled tasks for triggering events at specified times and regular intervals
  48. 48. References: Google App Engine 48► http://code.google.com/appengine/
  49. 49. References: Django 49► http://www.djangoproject.com/ ○ Sito del Progetto► https://groups.google.com/forum/#!forum/django-it ○ Google group Italiano di Django
  50. 50. References: Python 50► http://www.python.org ○ Sito ufficiale di Python► http://www.python.it ○ Sito ufficiale Python Italia► https://groups.google.com/forum/#!forum/it.comp.lang.python ○ Google group Italiano di Python► http://forum.python-it.org ○ Forum (~)official Python Italia► http://www.pycon.it/ ○ Python Italian Conference ○ EuroPython 2011 – Florence, IT – across spring
  51. 51. References: Titles 51 ► The definitive guide to Django A. Holovaty and J.K. Moss, Apress
  52. 52. References: Titles 52 ► Sviluppare applicazioni web con Django, Marco Beri,APOGEO
  53. 53. References: Titles 53 ► Python, Marco Beri, APOGEO Serie Pocket
  54. 54. References: Titles 54 ► Programming Google App Engine, D. Sanderson,OReilly
  55. 55. And last... 55►Want to get some actions?►Lets do together a working example
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×