Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web frameworks - Web Development done right (Re...

Web frameworks - Web Development done right (Remastered)

Remastered version of the class about "Web application development using Web Frameworks" [http://goo.gl/rRg8M9].

The first part of the class describes the main issues related to web application development that lead to the spread of web frameworks.
Nowadays (web) frameworks have become very popular, providing a ready to use development infrastructure for almost every programming language.

On the other hand, the second part of the talk highlights the main features and functionalities provided by *Django*, which is one of the first and most famous Python web framework.

(A lot of) code examples are reported in the slides, as well as funny Monty Python quotes (which alone are worth enough to give you a good reason to take a look !-)

Valerio Maggio

December 19, 2013
Tweet

More Decks by Valerio Maggio

Other Decks in Programming

Transcript

  1. Who I Am I’m Valerio (Maggio) I got my Ph.D.

    in Computer Science at the University of Naples “Federico II” http://wpage.unina.it/valerio.maggio
  2. Who I Am I’m Valerio (Maggio) I got my Ph.D.

    in Computer Science at the University of Naples “Federico II” This is me… …only one half of me, by the way… http://wpage.unina.it/valerio.maggio
  3. Who I Am I’m Valerio (Maggio) I got my Ph.D.

    in Computer Science at the University of Naples “Federico II” So yes, I’m a Computer Scientist... This is me… …only one half of me, by the way… http://wpage.unina.it/valerio.maggio
  4. After this class you should (hopefully!-) have learnt what a

    web framework is and what it is not Introduction to Web Frameworks Introduction to +
  5. After this class you should (hopefully!-) have learnt what a

    web framework is and what it is not have learnt when and why you should use a web framework Introduction to Web Frameworks Introduction to +
  6. After this class you should (hopefully!-) have learnt what a

    web framework is and what it is not have learnt when and why you should use a web framework be aware that there is a plethora of web frameworks now available (but Django is a very good one!-) (iow) Overview of Django features and design Introduction to Web Frameworks Introduction to +
  7. (Last but not least) Monty Python’s funny quotes (along with

    title slides) Btw, there’s a rationale for that (despite the fact that it’s funny !-)
  8. WHAT YOU’LL
 not FIND IN THIS CLASS A Django tutorial

    …but we’ll have a lot of examples and useful references
  9. “ King Arthur: One, two, five!
 Sir Galahad: Three sir!


    King Arthur: THREE! ” – Monty Python and the Holy Grail Start over (seriously)
  10. Framework “framework” is one of the most overused word in

    Computer Science framework is a buzzword i.e., “a word or phrase used to impress”
  11. Framework “framework” is one of the most overused word in

    Computer Science framework is a buzzword i.e., “a word or phrase used to impress” Testing framework
  12. Framework “framework” is one of the most overused word in

    Computer Science framework is a buzzword i.e., “a word or phrase used to impress” Testing framework Development framework
  13. Framework “framework” is one of the most overused word in

    Computer Science framework is a buzzword i.e., “a word or phrase used to impress” Testing framework Development framework Web framework
  14. Framework “framework” is one of the most overused word in

    Computer Science framework is a buzzword i.e., “a word or phrase used to impress” Testing framework Development framework Web framework ’^.*$’ framework
  15. Framework “framework” is one of the most overused word in

    Computer Science framework is a buzzword i.e., “a word or phrase used to impress” Q: What do you expect a framework is ?
  16. What a framework is not A framework is not an

    API i.e., Application Programming Interface “An API specifies how some software components should interact with each other”
  17. What a framework is not A framework is not an

    API i.e., Application Programming Interface “An API specifies how some software components should interact with each other” A framework is not a Library “A Library is a collection of functions/objects serving a particular purpose”
  18. What a framework is not (cont.) A framework is not

    an Application
 (Moreover) A (web) framework is not a CMS “Content Management System” • We will briefly see the difference in next slides
  19. “Thanks a lot for the gold and frankincense, but don't

    worry too much about the myrrh the next time, all right?.” – Monty Python - The life of Brian 1. Web Technologies Evolution a.k.a. Brief recap of the main topics presented in previous lectures !-)
  20. Web Evolution Timeline Web developers wrote every page “by hand”

    Updating a web site means editing HTML HTML Pages no Web sad times :’(
  21. Web Evolution Timeline Web developers wrote every page “by hand”

    Updating a web site means editing HTML “redesign” means “do it from scratch” (again!) one at a time HTML Pages no Web sad times :’(
  22. Web Evolution Timeline Web developers wrote every page “by hand”

    Updating a web site means editing HTML “redesign” means “do it from scratch” (again!) one at a time No Scalability i.e., How many pages there may be? HTML Pages no Web sad times :’(
  23. Simple Example http://mathworld.wolfram.com/topics/AppliedMathematics.html get /topics/AppliedMathematics.html http/1.1 host: mathworld.wolfram.com The Web

    HTTP/1.1 200 OK date: Fri, 17 May 2002 09:47:47 GMT server: Apache/1.3.20 (Unix) connection: close cache-control: no-cache content-length: 22085 content-type: text/html ! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> ...
  24. Simple Example http://mathworld.wolfram.com/topics/AppliedMathematics.html get /topics/AppliedMathematics.html http/1.1 host: mathworld.wolfram.com The Web

    HTTP/1.1 200 OK date: Fri, 17 May 2002 09:47:47 GMT server: Apache/1.3.20 (Unix) connection: close cache-control: no-cache content-length: 22085 content-type: text/html ! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> ... Web Page HTML Page
  25. Web Evolution Timeline (+) Web Pages are intended as resources

    Dynamically generate contents It was the raise of the so-called “server side technologies” HTML Pages CGI Scripting no Web CGI - Common Gateway Interface
  26. Web Evolution Timeline (+) Web Pages are intended as resources

    Dynamically generate contents It was the raise of the so-called “server side technologies” (-) Difficult Code reuse Lots of boilerplate code HTML Pages CGI Scripting no Web CGI - Common Gateway Interface
  27. Web Evolution Timeline (+) Web Pages are intended as resources

    Dynamically generate contents It was the raise of the so-called “server side technologies” (-) Difficult Code reuse Lots of boilerplate code (-) High learning curve HTML Pages CGI Scripting no Web CGI - Common Gateway Interface
  28. Q: Do you have any concern about these script? I

    did my best in making these Perl scripts (human) readable :-P Web Browser Web Server CGI Program HTTP Request HTML Response exec w/environ stdout
  29. Q: Any remark? Web Browser Web Server CGI Program HTTP

    Request HTML Response exec w/environ stdout Database SQL
  30. Web Evolution Timeline HTML Pages CGI Scripting PHP like Technologies

    PHP: Hypertext Pre-Processor …originally it was “Personal Home Page” no Web
  31. Web Evolution Timeline (+) Learning curve extremely shallow Server-side code

    mixed within HTML HTML Pages CGI Scripting PHP like Technologies PHP: Hypertext Pre-Processor …originally it was “Personal Home Page” no Web
  32. Web Evolution Timeline (+) Learning curve extremely shallow Server-side code

    mixed within HTML (-) No Security and or protection mechanism provided HTML Pages CGI Scripting PHP like Technologies PHP: Hypertext Pre-Processor …originally it was “Personal Home Page” no Web
  33. Web Evolution Timeline (+) Learning curve extremely shallow Server-side code

    mixed within HTML (-) No Security and or protection mechanism provided (-) (Again… and even more) 
 Bunch of HTML, Code and SQL… all together HTML Pages CGI Scripting PHP like Technologies PHP: Hypertext Pre-Processor …originally it was “Personal Home Page” no Web
  34. Presentation! + Business Logic! + ! Data (& SQL)! =

    ! All messed up Q: What if you have to share (even one of) them among multiple pages? A: Duplication 
 (a.k.a. Bad Smell)
  35. Web Evolution Timeline (Q) Do you know what RIA means?

    HTML Pages CGI Scripting PHP like Technologies RIA: Rich Internet Applications no Web RIA
  36. Web Evolution Timeline (Q) Do you know what RIA means?

    (A) Desktop like web applications Javascript (and Ajax) Intensive web apps HTML Pages CGI Scripting PHP like Technologies RIA: Rich Internet Applications no Web RIA
  37. Web Evolution Timeline (Q) Do you know what RIA means?

    (A) Desktop like web applications Javascript (and Ajax) Intensive web apps Solutions battery included HTML Pages CGI Scripting PHP like Technologies RIA: Rich Internet Applications no Web RIA
  38. Web Server XMLHTTP Request XML Response QUERY_STRING XML data Database

    Server-side Technology Web Browser Javascript (Update) HTML SQL Rich-Internet Applications
  39. Web Server XMLHTTP Request XML Response QUERY_STRING XML data Database

    Server-side Technology Web Browser Javascript (Update) HTML SQL Rich-Internet Applications Presentation and Visualisation
  40. Web Server XMLHTTP Request XML Response QUERY_STRING XML data Database

    Server-side Technology Web Browser Javascript (Update) HTML SQL Rich-Internet Applications Presentation and Visualisation Business Logic
  41. Web Server XMLHTTP Request XML Response QUERY_STRING XML data Database

    Server-side Technology Web Browser Javascript (Update) HTML SQL Rich-Internet Applications Presentation and Visualisation Data and Models Business Logic
  42. Web Server XMLHTTP Request XML Response QUERY_STRING XML data Database

    Server-side Technology Web Browser Javascript (Update) HTML SQL Rich-Internet Applications Presentation and Visualisation Data and Models Business Logic Q: Is this recalling you something?
  43. MVC: Model View Controller Model Responsible for domain and data

    acquisition View Responsible of data visualisation Controller Responsible of domain object handling Controller Model View +theView +theController +theModel +theModel
  44. MVC: Model View Controller Model Responsible for domain and data

    acquisition View Responsible of data visualisation Controller Responsible of domain object handling Controller Model View +theView +theController +theModel +theModel Q: Is this model applicable to web apps as is ?
  45. Web-MVC: Model View Controller Model Responsible for domain and data

    acquisition View Responsible of data visualisation Controller Responsible of domain object handling A: No! No direct connection between view and Model! Why? Controller Model View +theView +theController +theModel
  46. (Web-MVC) “Stack” of Capabilities Model Database Abstractions ORM - Object

    relational Mapping View Javascript Library Web page compositions (a.k.a. Template Engine) (Local) Development Server
  47. (Web-MVC) “Stack” of Capabilities Model Database Abstractions ORM - Object

    relational Mapping View Javascript Library Web page compositions (a.k.a. Template Engine) (Local) Development Server Controller URL Routing (RESTful) Controller-view Association Security Mechanism (SQL-Injections, Clickjacking, CSRF)
  48. Do not reinvent the wheel This Stack of capabilities is

    exactly what web frameworks are aimed to provide Web frameworks provide a programming infrastructure for developing web applications “Focused on developing code without reinventing the wheel”
  49. “ Cleric: And the people did feast upon the lambs

    and sloths, and carp and 
 anchovies, and orangutans and breakfast cereals, and fruit-bats and… Brother Maynard: Skip a bit brother…” – Monty Python and the Holy Grail 3. Web Frameworks
  50. Definition […] 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. source: python.org wiki !
  51. Definition […] 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. source: python.org wiki ! FYI, there exist also Micro-Frameworks
  52. [full|micro] stack 
 web frameworks Full stack frameworks: HTTP Request/Response

    URL Routing Mechanism Dev Server (WSGI) ORM Template Engines Micro stack frameworks: HTTP Request/Response URL Routing Mechanism Dev Server (WSGI) ORM (or any DB wrapper) Template Engines
  53. Layers 
 of the stack [full|micro] stack frameworks: HTTP Request/Response

    URL Routing Mechanism Dev Server (WSGI) [ORM]? [Template Engines]? Some frameworks Provide their own implementation for each component of the stack e.g., Django
  54. Layers 
 of the stack [full|micro] stack frameworks: HTTP Request/Response

    URL Routing Mechanism Dev Server (WSGI) [ORM]? [Template Engines]? Some frameworks Provide their own implementation for each component of the stack e.g., Django Some others are designed to integrate third party tools e.g., Turbogears
  55. Design Principles and Goals Convention over Configuration Convention over Configuration

    is a programming design that favours following a certain set of programming conventions instead of configuring an application framework.
  56. Design Principles and Goals Convention over Configuration Convention over Configuration

    is a programming design that favours following a certain set of programming conventions instead of configuring an application framework. DRY (Don’t 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
  57. Design Principles and Goals Convention over Configuration Convention over Configuration

    is a programming design that favours following a certain set of programming conventions instead of configuring an application framework. DRY (Don’t 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 Loose Coupling The various layers of the framework shouldn’t “know” about each other unless absolutely necessary.
  58. Design Principles and Goals Less code Web Apps should use

    as little code as possible; they should lack boilerplate.
  59. Design Principles and Goals Less code Web Apps should use

    as little code as possible; they should lack boilerplate. Quick Development The point of a Web framework in the 21st century is to make the tedious aspects of Web development fast.
  60. Frameworks are not CMS CMS - Content Management Systems Aim

    to manage work-flows and contents in a collaborative environment
  61. Frameworks are not CMS CMS - Content Management Systems Aim

    to manage work-flows and contents in a collaborative environment Designed to simplify the publication of contents to web sites and mobile devices
  62. Frameworks are not CMS CMS - Content Management Systems 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 (mostly written in PHP):
  63. Frameworks are not CMS Aim to alleviate the overhead associated

    with common Web development Designed to support the development of web services and/or web applications e.g., Develop a CMS
  64. Frameworks are not CMS Aim to alleviate the overhead associated

    with common Web development Designed to support the development of web services and/or web applications e.g., Develop a CMS based on
  65. “King Arthur: A Duck.
 Sir Bedevere: …Exactly. So, logically...
 Peasant:

    If she weighed the same as a duck... she's made of wood.
 Sir Bedevere: And therefore...
 Peasant: ...A witch!” – Monty Python and the Holy Grail 4. Introducing
  66. Python 
 Programming Language High-level Programming Language Very shallow learning

    curve Multi Platform Windows, Linux, Unix (Mac OSX) http://www.python.org
  67. Python 
 Programming Language High-level Programming Language Very shallow learning

    curve Multi Platform Windows, Linux, Unix (Mac OSX) Off-side-rule based i.e., no brackets nor semicolon required! http://www.python.org
  68. Python 
 Programming Language High-level Programming Language Very shallow learning

    curve Multi Platform Windows, Linux, Unix (Mac OSX) Off-side-rule based i.e., no brackets nor semicolon required! Language of the choice in: http://www.python.org
  69. Python Typing Mechanism Dynamic Typing i.e., It is not required

    to specify the types of variables/functions it is automatically inferred by operations Strong Typing i.e., Once the type has been inferred, it cannot change without explicit CAST
  70. Python Typing Mechanism Duck Typing It walks like a Duck

    It quacks like a Duck (Inference) It’s a Duck!!
  71. Python Typing Mechanism Duck Typing It walks like a Duck

    It quacks like a Duck (Inference) It’s a Duck!! ! >>> def calculate(a, b, c): ... return (a+b) * c
 ! >>> calculate(1, 2, 3) 9
 ! >>> calculate([1, 2, 3], [4, 5, 6], 2) [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]
 ! >>> calculate(‘apples ’, ‘and oranges, ’, 3) ‘apples and oranges, apples and oranges, apples and oranges, ’ off-side rule 
 (4 spaces)
  72. Python main features Pure OOP Multi-paradigm + functional features Succinct

    yet very readable syntax Very fast code-run-test cycle (no build) Great introspection (saves tons of time) Built-in data structures (Map, Immutable List) Interactive Shell
  73. << constructor >> Author(first: String, last: String) get_first_name(): String get_last_name():

    String get_full_name(): String first_name: String last_name: String Author Example: Author class UML Specification Python Implementation
  74. << constructor >> Author(first: String, last: String) get_first_name(): String get_last_name():

    String get_full_name(): String first_name: String last_name: String Author Example: Author class UML Specification Python Implementation btw, in Python you may also 
 import this (please, try this out !-) self refers to object instance 
 (like this in Java) Each instance method has self as the first parameter
  75. Here we instantiate the new author object
 (no new keyword

    is required) Please note that the self parameter is automatically fed in the method call via the dot notation
 (self corresponds to author in this case)
  76. No brackets here (since these are properties, not methods) Find

    out more on properties here: 
 http://docs.python.org/2/library/functions.html#property
  77. “And Now for Something Completely Different.” – Monty Python Flying

    Circus 4.1 Django at a glance https://www.djangoproject.com
  78. Django Project and Apps $ django-admin.py startproject mysite mysite/ ├──

    manage.py └── mysite ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py ! 1 directory, 5 files A Django Project is made of Apps Apps provide specific functionalities e.g., Auth, Social Integration, Polls, … Apps should be as less coupled as possible
  79. Django Project and Apps $ django-admin.py startproject mysite mysite/ ├──

    manage.py └── mysite ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py ! 1 directory, 5 files A Django Project is made of Apps Apps provide specific functionalities e.g., Auth, Social Integration, Polls, … Apps should be as less coupled as possible $ python manage.py startapp polls mysite/ ├── manage.py ├── mysite │ ├── __init__.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py └── polls ├── __init__.py ├── admin.py ├── models.py ├── tests.py └── views.py ! 2 directories, 10 files
  80. Design goal: Reusable Apps Loosely coupled modules (Apps) in order

    to be shared among different projects • a.k.a. pluggable apps
  81. Design goal: Reusable Apps Loosely coupled modules (Apps) in order

    to be shared among different projects • a.k.a. pluggable apps You can plug into your project many 3rd party apps, immediately adding to your product complex functionality Copy&Paste the folder into the Project root • No need for coding
  82. SOME REUSABLE APPS django-ratings django-ajax-validation django-google-analytics django-mailer django-discussion django-announcements django-email-confirmation

    django-jits django-liveblogging django-atompub django-queue-service django-galaxy django-messages django-audioplayer django-dynamic-media-serve django-evolution django-authopenid django-googlemap django-compress django-db-log django-avatar django-graphs django-oembed django-clevercss django-basic-blog django-microformats django-object-view-tracking django-chunks django-basic-library django-tagging django-mobileadmin django-ads django-basic-people django-survey django-rest-interface django-orm-cache django-basic-places django-voting django-page-cms django-registration django-cron django-wiki django-photologue django-navbar django-favorites satchmo django-pingback django-openid django-forum sorl-thumbnail django-pressroom django-oauth django-gcal django-mailfriend django-recommender django-mmo
  83. Django MVC:
 MTV Model Django ORM + Python classes MTV:

    Model-Template-View View Model Template +theTemplate +theModel URL Dispatcher [(framework) Controller] +theView
  84. Django MVC:
 MTV Model Django ORM + Python classes Template

    HTML-like resources Shows data coming from Views. MTV: Model-Template-View View Model Template +theTemplate +theModel URL Dispatcher [(framework) Controller] +theView
  85. Django MVC:
 MTV Model Django ORM + Python classes Template

    HTML-like resources Shows data coming from Views. View Python Callback functions Handles business logic: arranges and supplies data to Templates MTV: Model-Template-View View Model Template +theTemplate +theModel URL Dispatcher [(framework) Controller] +theView
  86. Django MVC:
 MTV Model Django ORM + Python classes Template

    HTML-like resources Shows data coming from Views. View Python Callback functions Handles business logic: arranges and supplies data to Templates (+) Controller (framework) Dispatches requests to proper Views based on RegExp matching MTV: Model-Template-View View Model Template +theTemplate +theModel URL Dispatcher [(framework) Controller] +theView
  87. Django features Django has a lot of built-in stuff, to

    boost productivity Nevertheless, it strives to remain as small as possible to support any extension to not limit what you can do
  88. Data Models and ORM Author first_name: Char[50] last_name: Char[50] Genre

    description: Char[30] Book title: Char[200] buyed_on: Date 1..* 1..* 1 1..*
  89. Data Models and ORM Author first_name: Char[50] last_name: Char[50] Genre

    description: Char[30] Book title: Char[200] buyed_on: Date 1..* 1..* 1 1..* All the model classes extends (django) models.Model
  90. Automatic Forms Model Form 
 (i.e., Form from Model class)

    extending (django) forms.ModelForm Form Class with 
 custom fields
 extending (django) forms.Form
  91. Views and Templates libri.html: 
 template file name Libro.objects.all().order_by(‘titolo’): 


    Django ORM in action This means: SELECT * from Libro ORDER_BY ‘titolo’
  92. (built-in) Template Language Variables: Syntax {{ variable_name }} e.g., {{

    autore }} Template Tags: Syntax {% template_tag_name %} e.g., {% for libro in libri %} {% endfor %} Filters: Syntax {{ variable_name|filter }} Alters the formatting of variables e.g., {{ libro.data_acquisto|date:”d/m/Y" }}
  93. URL config URL dispatching based on Regular Expressions: Mapping between

    RegExp and Django view This URL will match incoming requests to /libri/ that will be served by the view libreria.views.libri
  94. URL config URL dispatching based on Regular Expressions: Mapping between

    RegExp and Django view This URL will match incoming requests to /libri/ that will be served by the view libreria.views.libri This will enable default Admin Application
  95. (built-in) Auth & User Management:
 ! ! ! ! !

    django.contrib.auth Automatic RESTful URLs http://<server_root>/admin/auth/ http://<server_root>/admin/auth/user/
  96. Scalability Django runs on regular web servers, such as Apache,

    Lighty or Nginx using a built-in Python or WSGI adapter
  97. Scalability Django runs on regular web servers, such as Apache,

    Lighty or Nginx using a built-in Python or WSGI adapter This makes it very lightweight & scalable, as any LAMP deployment There are examples of sites that handle MM reqs/hour, using less than 10 servers
  98. Google App Engine (GAE) Full-stack web framework Multiple Runtime Environment

    supported e.g., Python, Java, Go (experimental) Django apps can be easily deployed (Python runtime only, btw)
  99. Google App Engine (GAE) Full-stack web framework Multiple Runtime Environment

    supported e.g., Python, Java, Go (experimental) Django apps can be easily deployed (Python runtime only, btw) Exploits the Google Cloud Platform Google Data Storage API for Authentication using Google Accounts
  100. “ Sir Bedevere: …and what do you burn apart from

    witches?
 Peasant: Moooore witcheees!!” – Monty Python and the Holy Grail References
  101. (Django) References (1) Italian http://sushi.apogeonline.com/ebook/ creare-la-prima-applicazione-con-django Code examples used along

    the slides has been gathered from: https://bitbucket.org/django-sushi http://goo.gl/j9aVJI