SlideShare una empresa de Scribd logo
1 de 32
Descargar para leer sin conexión
The colors of MVC
What is MVC?
● An amazing pattern that can be found
  throughout just about any software
● Controller -> input
● Model -> throughput
● View -> output
● MVP/MVA/etc. are all MVC, just with
  different names
● Not a design pattern
Atomic elements of an application


                            Controller




                    Model

             View
MVC Colorwheel

                        Model



       Cache
                                                   Input
                                                Middleware



               View                Controller


                       Output
                      Middleware
Model
● Raw data comes in, raw data goes out
● App specific code
● Not just storage, all business logic goes in
  the model
● Can be reused across any controller
● Represents what computers want to give to
  users
Controller
● Data transport
● Non app-specific, common across any app
● Http / request / response / headers / ip
  address / cookies / etc.
● Represents link between human and
  computer
Views
● Takes in raw data, returns 'visualized' data
● HTML, XML, JSON, JPEG
● Represents what humans want from the
  cmputer
Controller -> model -> view ->
controller
def new_blog(request):
  # {'author': 'bob', 'title': 'Title', 'body': 'Body'}
  data = request.POST
  blog = Blog.objects.create(**data)
  html = render({'blog': blog}, 'blog.html')
  return HttpResponse(html)
curl -d "title='my blog'&author=bob&body='my blog body'" http://myblog.com/new_blog

                                                                     HTML minify


              HttpRedirect("http://myblog.com/view/%d" % blog.id))




                   Blog.objects.create()




                                            "http://myblog.com/view/%d" % blog.id




python manage.py new_blog --title='My blog' --author="bob" --body="my blog body"
Input Middleware
●   Mix between Controller and Model
●   Processes the data stream from controller
●   Examples: Authentication middleware
●   View hs no idea about Input Middleware
Session Middleware
def session_middleware(request):
  sid = request.COOKIES.get('session_id')
  if sid:
      session = Session.objects.get(id=sid)
  else:
      session = Session.objects.create(**)

  request.session = session
  return request
Output Middleware
● Modifies the data stream from the controller
  after the view
● Examples: HTTP minify middleware
● Completely hidden from the model
HTML Minifier
def minify_middleware(response):
  if 'html' in response.mimetype:
      minified = response.content.replace(' ', '')
      response.content = minified
      return response
  else:
      return response
Cache
● Short circuit of Model and View
● Performance improvement when you can get
  away with returning pre-rendered data+html
● Primary usage of key/value stores
● Performance comes with a price, cache
  invalidation is tough
Cache
def view_blog(request, id):
  key = "html_blog_%s" % id
  html = memcache.get(key)
  if html:
      return html
  else:
      blog = Blog.objects.get(id=id)
      html = render('blog.html', blog)
      return memcache.set(html, key)
curl http://myblog.com/view/45

                                                                     HTML minify


                     render("blog.html", blog)




                   Blog.objects.get()




                                        "%sn%sn%s" % (blog.title, blog.author, blog.body)




python manage.py view_blog 5
MVC is everywhere!
                                                   Blog.objects.get




        def get(self, id):
          table_name = 'blog'
          engine = settings.DB_ENGINE
          q = "select * from %s where id=%s" % (
             table_name, id
          )
          data = engine.execute(q)
          return Blog(**data)
I mean, everywhere!
                                                       render()




         def render(template, context, unicode=True)
           t = open(template).read()
           html = do_render(t, context)
           if unicode:
               return unicode(html)
           else:
               return html
Try not to mix colors
● Keep model code isolated from controller
  and view code
● Coupling is bad
● Reusability, discoverability, and predictability
● If you have to mix colors, its OK! Just
  remember to fix it later!
Giotto
● Application framework that does away with
  controllers
● Not at all like django/pyramid/flask
● Completely decoupled models and views
● https://github.com/priestc/giotto
Giotto example
class Multiply(GiottoProgram)
   name = 'multiply'
   controllers = ('http-get', 'cmd', 'irc')
   model = [multiply]
   view = RedBlueMultiplyViewer
Decoupled Design
                                                                                   Model
                                                                              Postgres, rabbitmq,
                                                                              validation, algorithms
                                                                              facebook api, etc.

                                                       5})
                                                  'y':
                                        ':   3,
                               ',   {'x
                             ly
                       ultip                                                                       {{'x': 3, 'y': 5, 'result': 15}
                    ('m

  HTTP
headers, cookies,
request, ips,
response...            {'body': '<
                                             html...', 'm
                                                             imetype':
                                                                                            View
                                                                         '...' }
                                                                                         HTML, JSON,
                                                                                         mimetypes, image
                                                                                         formats, templates
./giotto http-dev
Decoupled Design
                                                                                   Model
                                                                               Postgres, rabbitmq,
                                                                               validation, algorithms
                                                                               facebook api, etc.

                                                       5})
                                                  'y':
                                        ':   3,
                               ',   {'x
                             ly
                       ultip                                                                        {{'x': 3, 'y': 5, 'result': 15}
                    ('m

  IRC
channels, private
message, server,
ops, voice, etc.       {'body': 't
                                             ext', 'mim
                                                             etype': '.
                                                                                             View
                                                                       ..' }
                                                                                          HTML, JSON,
                                                                                          mimetypes, image
                                                                                          formats, templates
Command Line
Giotto example
class Multiply(GiottoProgram)
   name = 'multiply'
   controllers = ('http-get', 'cmd', 'irc')
   model = [multiply]
   cache = 3600
   view = RedBlueMultiplyViewer
Automatic Cache
                                                                   Model
                                                             Postgres, rabbitmq,
                                                             validation, algorithms
                                                             facebook api, etc.




                                                             {{'x': 3, 'y': 5, 'result': 15}
             ('multiply', {'x': 3, 'y': 5})
Controller                                           Cache
              {'body': 'text', 'mimetype': '...' }


                                                                  View
                                                               HTML, JSON,
                                                               mimetypes, image
                                                               formats, templates
Model Mocking
class Multiply(GiottoProgram)
   name = 'multiply'
   controllers = ('http-get', 'cmd', 'irc')
   model = [multiply, {'x': 10, 'y': 11, 'result':
110}]
   cache = 3600
   view = RedBlueMultiplyViewer
Decoupled Design                                                                                     Model
                                                                                                Postgres, rabbitmq,
                                                                                                validation, algorithms
                                                                                                facebook api, etc.



                                                                               Mock



                                                     5})                   {{'x': 10, 'y': 11, 'result': 110}
                                                'y':
                                           3,
                                     x':
                             ly', {'
                         ltip
                    (' mu

  IRC
channels, private
message, server,
ops, voice, etc.        {'body': 't
                                   ext', 'mim
                                                         etype': '.
                                                                                          View
                                                                   ..' }
                                                                                       HTML, JSON,
                                                                                       mimetypes, image
                                                                                       formats, templates
Model Mocking
● Designers don't need to run
  rabbitmq/postgres/etc.
● Data interchange between model/view is
  explicit and simply stated
Middleware
class Multiply(GiottoProgram)
   name = 'multiply'
   controllers = ('http-get', 'cmd', 'irc')
   input_middleware = [AuthMiddleware]
   model = [multiply]
   cache = 3600
   view = RedBlueMultiplyViewer
   output_middleware = [MinifyMiddleware]
Questions?

Más contenido relacionado

La actualidad más candente

Patterns for JVM languages - Geecon 2014
Patterns for JVM languages - Geecon 2014Patterns for JVM languages - Geecon 2014
Patterns for JVM languages - Geecon 2014
Jaroslaw Palka
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
Adieu
 

La actualidad más candente (20)

JavaScript Design Patterns
JavaScript Design PatternsJavaScript Design Patterns
JavaScript Design Patterns
 
Groovy 2.0 webinar
Groovy 2.0 webinarGroovy 2.0 webinar
Groovy 2.0 webinar
 
Static Analysis in IDEA
Static Analysis in IDEAStatic Analysis in IDEA
Static Analysis in IDEA
 
Groovy Update - JavaPolis 2007
Groovy Update - JavaPolis 2007Groovy Update - JavaPolis 2007
Groovy Update - JavaPolis 2007
 
Enterprise js pratices
Enterprise js praticesEnterprise js pratices
Enterprise js pratices
 
Groovy 2 and beyond
Groovy 2 and beyondGroovy 2 and beyond
Groovy 2 and beyond
 
Oojs 1.1
Oojs 1.1Oojs 1.1
Oojs 1.1
 
Patterns for JVM languages - Geecon 2014
Patterns for JVM languages - Geecon 2014Patterns for JVM languages - Geecon 2014
Patterns for JVM languages - Geecon 2014
 
BabelJS - James Kyle at Modern Web UI
BabelJS - James Kyle at Modern Web UIBabelJS - James Kyle at Modern Web UI
BabelJS - James Kyle at Modern Web UI
 
Understanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG JuneUnderstanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG June
 
Javascript
JavascriptJavascript
Javascript
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Basics of Java Script (JS)
Basics of Java Script (JS)Basics of Java Script (JS)
Basics of Java Script (JS)
 
Unbundling the JavaScript module bundler - DublinJS July 2018
Unbundling the JavaScript module bundler - DublinJS July 2018Unbundling the JavaScript module bundler - DublinJS July 2018
Unbundling the JavaScript module bundler - DublinJS July 2018
 
C++ L09-Classes Part2
C++ L09-Classes Part2C++ L09-Classes Part2
C++ L09-Classes Part2
 
Java - A broad introduction
Java - A broad introductionJava - A broad introduction
Java - A broad introduction
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScript
 
Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScript
 
Zotonic presentation Erlang Camp Boston, august 2011
Zotonic presentation Erlang Camp Boston, august 2011Zotonic presentation Erlang Camp Boston, august 2011
Zotonic presentation Erlang Camp Boston, august 2011
 

Similar a Visualizing MVC, and an introduction to Giotto

JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
philogb
 
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSJavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
philogb
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 

Similar a Visualizing MVC, and an introduction to Giotto (20)

Scalable web application architecture
Scalable web application architectureScalable web application architecture
Scalable web application architecture
 
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMRVue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMR
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
 
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSJavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
 
JS Single-Page Web App Essentials
JS Single-Page Web App EssentialsJS Single-Page Web App Essentials
JS Single-Page Web App Essentials
 
Ember.js Tokyo event 2014/09/22 (English)
Ember.js Tokyo event 2014/09/22 (English)Ember.js Tokyo event 2014/09/22 (English)
Ember.js Tokyo event 2014/09/22 (English)
 
Introduction to Django
Introduction to DjangoIntroduction to Django
Introduction to Django
 
Backbone Basics with Examples
Backbone Basics with ExamplesBackbone Basics with Examples
Backbone Basics with Examples
 
Aprimorando sua Aplicação com Ext JS 4 - BrazilJS
Aprimorando sua Aplicação com Ext JS 4 - BrazilJSAprimorando sua Aplicação com Ext JS 4 - BrazilJS
Aprimorando sua Aplicação com Ext JS 4 - BrazilJS
 
Mustache
MustacheMustache
Mustache
 
Wt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technologyWt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technology
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.js
 
Picking Mushrooms after Cppcheck
Picking Mushrooms after CppcheckPicking Mushrooms after Cppcheck
Picking Mushrooms after Cppcheck
 
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
 
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
 
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years laterSymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends ForeverjQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
 

Visualizing MVC, and an introduction to Giotto

  • 2. What is MVC? ● An amazing pattern that can be found throughout just about any software ● Controller -> input ● Model -> throughput ● View -> output ● MVP/MVA/etc. are all MVC, just with different names ● Not a design pattern
  • 3. Atomic elements of an application Controller Model View
  • 4. MVC Colorwheel Model Cache Input Middleware View Controller Output Middleware
  • 5. Model ● Raw data comes in, raw data goes out ● App specific code ● Not just storage, all business logic goes in the model ● Can be reused across any controller ● Represents what computers want to give to users
  • 6. Controller ● Data transport ● Non app-specific, common across any app ● Http / request / response / headers / ip address / cookies / etc. ● Represents link between human and computer
  • 7. Views ● Takes in raw data, returns 'visualized' data ● HTML, XML, JSON, JPEG ● Represents what humans want from the cmputer
  • 8. Controller -> model -> view -> controller def new_blog(request): # {'author': 'bob', 'title': 'Title', 'body': 'Body'} data = request.POST blog = Blog.objects.create(**data) html = render({'blog': blog}, 'blog.html') return HttpResponse(html)
  • 9. curl -d "title='my blog'&author=bob&body='my blog body'" http://myblog.com/new_blog HTML minify HttpRedirect("http://myblog.com/view/%d" % blog.id)) Blog.objects.create() "http://myblog.com/view/%d" % blog.id python manage.py new_blog --title='My blog' --author="bob" --body="my blog body"
  • 10. Input Middleware ● Mix between Controller and Model ● Processes the data stream from controller ● Examples: Authentication middleware ● View hs no idea about Input Middleware
  • 11. Session Middleware def session_middleware(request): sid = request.COOKIES.get('session_id') if sid: session = Session.objects.get(id=sid) else: session = Session.objects.create(**) request.session = session return request
  • 12. Output Middleware ● Modifies the data stream from the controller after the view ● Examples: HTTP minify middleware ● Completely hidden from the model
  • 13. HTML Minifier def minify_middleware(response): if 'html' in response.mimetype: minified = response.content.replace(' ', '') response.content = minified return response else: return response
  • 14. Cache ● Short circuit of Model and View ● Performance improvement when you can get away with returning pre-rendered data+html ● Primary usage of key/value stores ● Performance comes with a price, cache invalidation is tough
  • 15. Cache def view_blog(request, id): key = "html_blog_%s" % id html = memcache.get(key) if html: return html else: blog = Blog.objects.get(id=id) html = render('blog.html', blog) return memcache.set(html, key)
  • 16. curl http://myblog.com/view/45 HTML minify render("blog.html", blog) Blog.objects.get() "%sn%sn%s" % (blog.title, blog.author, blog.body) python manage.py view_blog 5
  • 17. MVC is everywhere! Blog.objects.get def get(self, id): table_name = 'blog' engine = settings.DB_ENGINE q = "select * from %s where id=%s" % ( table_name, id ) data = engine.execute(q) return Blog(**data)
  • 18. I mean, everywhere! render() def render(template, context, unicode=True) t = open(template).read() html = do_render(t, context) if unicode: return unicode(html) else: return html
  • 19. Try not to mix colors ● Keep model code isolated from controller and view code ● Coupling is bad ● Reusability, discoverability, and predictability ● If you have to mix colors, its OK! Just remember to fix it later!
  • 20. Giotto ● Application framework that does away with controllers ● Not at all like django/pyramid/flask ● Completely decoupled models and views ● https://github.com/priestc/giotto
  • 21. Giotto example class Multiply(GiottoProgram) name = 'multiply' controllers = ('http-get', 'cmd', 'irc') model = [multiply] view = RedBlueMultiplyViewer
  • 22. Decoupled Design Model Postgres, rabbitmq, validation, algorithms facebook api, etc. 5}) 'y': ': 3, ', {'x ly ultip {{'x': 3, 'y': 5, 'result': 15} ('m HTTP headers, cookies, request, ips, response... {'body': '< html...', 'm imetype': View '...' } HTML, JSON, mimetypes, image formats, templates
  • 24. Decoupled Design Model Postgres, rabbitmq, validation, algorithms facebook api, etc. 5}) 'y': ': 3, ', {'x ly ultip {{'x': 3, 'y': 5, 'result': 15} ('m IRC channels, private message, server, ops, voice, etc. {'body': 't ext', 'mim etype': '. View ..' } HTML, JSON, mimetypes, image formats, templates
  • 26. Giotto example class Multiply(GiottoProgram) name = 'multiply' controllers = ('http-get', 'cmd', 'irc') model = [multiply] cache = 3600 view = RedBlueMultiplyViewer
  • 27. Automatic Cache Model Postgres, rabbitmq, validation, algorithms facebook api, etc. {{'x': 3, 'y': 5, 'result': 15} ('multiply', {'x': 3, 'y': 5}) Controller Cache {'body': 'text', 'mimetype': '...' } View HTML, JSON, mimetypes, image formats, templates
  • 28. Model Mocking class Multiply(GiottoProgram) name = 'multiply' controllers = ('http-get', 'cmd', 'irc') model = [multiply, {'x': 10, 'y': 11, 'result': 110}] cache = 3600 view = RedBlueMultiplyViewer
  • 29. Decoupled Design Model Postgres, rabbitmq, validation, algorithms facebook api, etc. Mock 5}) {{'x': 10, 'y': 11, 'result': 110} 'y': 3, x': ly', {' ltip (' mu IRC channels, private message, server, ops, voice, etc. {'body': 't ext', 'mim etype': '. View ..' } HTML, JSON, mimetypes, image formats, templates
  • 30. Model Mocking ● Designers don't need to run rabbitmq/postgres/etc. ● Data interchange between model/view is explicit and simply stated
  • 31. Middleware class Multiply(GiottoProgram) name = 'multiply' controllers = ('http-get', 'cmd', 'irc') input_middleware = [AuthMiddleware] model = [multiply] cache = 3600 view = RedBlueMultiplyViewer output_middleware = [MinifyMiddleware]