Server Guy on the Front[End] Line

A SHORT AND BIASED HISTORY OF THE WEB

90's

Static pages

Dynamic :D!

Well, sort of...

WELCOME CGI & PHP

Late 90's

UGLY

import cgi
import cgitb; cgitb.enable()  # for troubleshooting

print "Content-type: text/html"
print

print """
<html>

<head><title>Sample CGI Script</title></head>

<body>

  <h3> Sample CGI Script </h3>
"""

form = cgi.FieldStorage()
message = form.getvalue("message", "(no message)")

print """

  <p>Previous message: %s</p>

  <p>form

  <form method="post" action="index.cgi">
    <p>message: <input type="text" name="message"/></p>
  </form>

</body>

</html>
""" % cgi.escape(message)

CGI IN PYTHON

I bet you had never seen something like this before

<html>
 <head>
  <title>PHP Test</title>
 </head>
 <body>
 <?php echo '<p>Hello World</p>'; ?> 
 </body>
</html>

Thanks to PHP, you were happy on 2003

Rails and Django took the throne

Ruby on Rails

class Post < ActiveRecord::Base
  attr_accessible :body, :title

  has_many :comments

  validates_presence_of :body, :title
end
class CommentsController < ApplicationController
        def create
                @post = Post.find(params[:post_id])
                @comment = @post.comments.create!(params[:comment])
                redirect_to @post
        end
end

Django

from django.db import models


class Contact(models.Model):

    first_name = models.CharField(
        max_length=255,
    )
    last_name = models.CharField(
        max_length=255,

    )

    email = models.EmailField()

    def __str__(self):

        return ' '.join([
            self.first_name,
            self.last_name,
        ])
from django.views.generic import ListView

from contacts.models import Contact


class ListContactView(ListView):

    model = Contact
    template_name = 'contact_list.html'
<h1>Contacts</h1>

<ul>
  {% for contact in object_list %}
    <li class="contact">{{ contact }}</li>
  {% endfor %}
</ul>

MODEL

VIEW, aka Controller

TEMPLATE

Meanwhile

TODAY

THANKS TO FIREFOX AND CHROME WE CAN BUILD REAL APPS

HIPSTER'S TIME

JQUERY IS THE NEW ASSEMBLER

It has no structure

Spaghetti code makes me sick

Backbone
Ember
Angular

REACT

<div id="example"></div>

<script type="text/jsx">
/** @jsx React.DOM */
var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

React.renderComponent(<Timer />,     document.getElementById('example')
);
</script>

METEOR AND DERBY

Title Text

deck

By Federico Carrone

Made with Slides.com

deck

  • 663

More from Federico Carrone