Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Object Oriented Webdesign

No description
by

Simon Diesenreiter

on 10 April 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Object Oriented Webdesign

Object-Oriented
Web-Development by Simon Diesenreiter Overview 2. - Body Ruby on Rails
Symfony2 Concept 3. - Design SASS (CSS) 4. - Functionality CoffeeScript WHO? Web Developers 1. - 3 Basic Questions repetitive tasks maintain reusable code(-fragments) WHY? "common approach" in web development Website 1 Website 2 Website 3 Website 4 Website 5 Website 6 - blog - wiki - forum - image gallery - forum - downloads - wiki - blog - wiki - videos - wiki - forum - downloads - videos - blog - downloads - image gallery - forum - image gallery - videos - wiki modules How? Structure body style function body - Symfony2
-Ruby on Rails Concept MVC-Frameworks MVC - Framework www.website.com/blog Ruby on Rails MVC - Framework written in Ruby David Heinemeier Hansson (2004) Version: 3.2 "Don't repeat yourself" "Convention over Configuration" Don't repeat yourself Convention before Configuration modular structure interchangeable modules speaking variable/function names no config files Model - View - Controller "Ruby Part - Controller" Database Active record <html>
<body>
%%content%%
</body>
</html> Template Engine "Data Part - Model" "HTML Part - View" Template Engine supports: XML (X)HTML JavaScript (Templates) JavaScript (CoffeeScript) CSS (SASS) Symfony2 HTTP-Framework (Request/Response - Handling)
no MVC-Framework! SensioLabs (Fabien Potencier) started as "copy" of Ruby on Rails
running on PHP, 2005 Version: 2.3 Model - View - Controller Controller Active record
(Doctrine) Database <html>
<body>
%%content%%
</body>
</html> View (Twig) Bundles "ultimate modularisation" Guestbook Forum Blog Data Code View Data Code View Data Code View Example class DefaultController extends Controller
{
public function mainAction() {
$result = ComputeContent(); //HTML as text
return $this->render('ExampleBundle:Default:index.html.twig', $result);
}
} <!DOCTYPE html>
<head>
</head>
<body>
{% result %}
</body>
</html> index.html.twig layout.html.twig <!DOCTYPE html>
<head>
</head>
<body>
{% block content %}
<p>Content!</p>
{% end block %}
</body>
</html> index.html.twig {% extends "ExampleBundle:Default:layout.html.twig" %}

{% block content %}
{% result %}
{% end block %} sidebar.html.twig class DefaultController extends Controller
{
public function sidebarAction() {
$links = getLinksContent(); //URIs as text
return $this->render('ExampleBundle:Default:sidebar.html.twig', $links);
}
} <aside>
{% for l in links %}
<a href="{{ l | url_encode() }}">{{ l }}</a>
{% endfor %}
</aside> resulting index.html <!DOCTYPE html>
<head>
</head>
<body>
<!-- render url('sidebar') -->
<aside>
<a href="index">index</a>
<a href="login">login</a>
</aside>
<!-- block content -->
<p>This is the computed content!</p>
</body>
</html> layout.html.twig <!DOCTYPE html>
<head>
</head>
<body>
{% render url('sidebar') %}
{% block content %}
<p>Content!</p>s
{% end block %}
</body>
</html> sidebar layout index Design SASS (CSS) SASS Syntactically Awesome Stylesheets
OO-like features extends CSS: - variables - nesting - functions (mixin) - inheritance Hampton Catlin, Nathan Weizenbaum (2007) Variables $blue: #3bbfce;
$margin: 16px;

.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}

.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
} SASS .content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}

.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
} CSS Mixins - many more... Nesting table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}

li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
} SASS CSS table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}

li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
} @mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}

@mixin left($dist) {
float: left;
margin-left: $dist;
}

#data {
@include left(10px);
@include table-base;
} SASS #data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
} CSS Functionality CoffeeScript CoffeeScript Jeremy Ashkenas (2009) Programming language -> compiles JavaScript OO Programming
Exceptions
Try - Catch
built-in snippet generation
- input, output
- string handling maximum performance! Example p2 = new power2(2);

p3 = new power3(2);

alert(p2.square());

alert(p3.cube()); 4 8 How much code? Pure JavaScript var p2, p3, power2, power3, _ref,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

power2 = (function() {
function power2(x) {
this.x = x;
}

power2.prototype.square = function() {
return this.x * this.x;
};

return power2;

})(); Power2 Overhead Pure Javascript power3 = (function(_super) {
__extends(power3, _super);

function power3() {
_ref = power3.__super__.constructor.apply(this, arguments);
return _ref;
}

power3.prototype.cube = function() {
return this.square() * this.x;
};

return power3;

})(power2); Power3 Pure JavaScript p2 = new power2(2);

p3 = new power3(2);

alert(p2.square());

alert(p3.cube()); CoffeeScript class power2
constructor: (@x) ->
square: () -> @x * @x

class power3 extends power2
cube: () -> @square() * @x

p2 = new power2(2)
p3 = new power3(2)
alert p2.square()
alert p3.cube() Retrospective 1. Layer - Body 2. Layer - Design 3. Layer - Functionality Ruby on Rails
Symfony2 (PHP) SASS CoffeeScript
Full transcript