Rapid web development, the right way.

how does go about performing

rapid web dev,
the right way.

$ whoami

Steven Goh
ctrleff

what makes it rapid?
what is the right way?

1. super easy to prototype
aka, does not get in your way.

python

print(“hello world”)

java
class HelloWorldApp {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}

2. scalable
collaborators will not be cursing (that much) at your shitty code base

2. scalable
collaborators will not be cursing (that much) at your shitty code base
proven technology that is actually used by huge infrastructures. (no rewriting needed)

android dev hackathon
solo dev vs groups of 5
wouldn't mind a new android tablet
so... cheat!

web app = client-side + backend

html
css
javascript

HTML
is !@$#ing ugly and boring. i also think it is verbose.

<body>
<div id="wrap">
<div class="bodycontainer" id="main">
<div class="left">
<img src="/static/images/menu_less_shadow.png"
class="appimg" />
</div>
<div class="right">
<div class="intro">
Hello You,
</div>
<div class="content">
<div class="graybox">
<span class="first">
Remember that dingy burger place around the
remote corner that was surprisingly cheap and good ?
</span>
<span class="meneither">
Me Neither.
</span>
<span class="bestfriend">
Nor your best friend.
</span>
<span class="last">
Soon you can. We are <text>launching
soon</text>.
</span>
</div>
</div>

Disgusting eh?
i wish...
i have a pythonic html. indentation for nesting.
something that's nice to work with css.

Hello SHPAML.
360 line python library.

body
div#wrap
div.bodycontainer#main
div.left
> img.appimg src="/static/images/menu_less_shadow.png"
div.right
div.intro
Hello You,
div.content
div.graybox
span.first
Remember that dingy burger place around the
remote corner that was surprisingly cheap and good ?
span.meneither
Me Neither.
span.bestfriend
Nor your best friend.
span.last
Soon you can. We are <text>launching
soon</text>.

body {
background-color: #d2d2d2; }
body .bodycontainer {
width: 1200px; }
body .bodycontainer .left {
width: 430px;
float: left; }
body .bodycontainer .left .appimg {
width: 430px; }
body .bodycontainer .right {
width: 770px;
float: left; }

Not DRY.
i wish...
for variables. for functions. mixins.

body
background-color: #d2d2d2

.bodycontainer
width: 1200px

.left
width: 430px
float: left

.appimg
width: 430px

.right
width: 770px
float: left

//mixins for typography

=subheader-font
font-family: "Trebuchet MS"

=content-font
font-family: "Verdana"

Javascript
just use JQuery, and you are all good.

shpaml + sass + javascript
!= html + css + javascript

Hello transcompiler-watcher
https://github.com/nubela/transcompiler-watcher

(v_env)nubela@nubela-envy:~/Workspace/ctrleff-landing-page/scripts$ ./watcher
Trasnscompiling: /home/nubela/Workspace/ctrleff-landing-
page/src/templates/influence.shpaml
page/src/templates/home.shpaml
page/src/static/css/colors.sass
page/src/static/css/typography.sass
page/src/static/css/main.sass

ReST
database

Backend
easy to implement ReSTFUL interface
ORM
unit-testing
templating
super small overhead.

Hello Flask.
python microframework.

declare the schema
class Ad(db.Model):
id = db.Column(db.Integer, primary_key=True)
location_id = db.Column(db.Integer, db.ForeignKey('location.id'))
location = db.relationship("Location")
created_timestamp = db.Column(db.DateTime)
contact_email = db.Column(db.String(255))

#meta below
description = db.Column(db.String(255))
title = db.Column(db.String(255))
price = db.Column(db.Float(asdecimal=True))
image = db.Column(db.String(255))
category_id = db.Column(db.Integer, db.ForeignKey('category.id'))
category = db.relationship("Category")

make em serializable
@property
def serialize(self):
return {
"id": self.id,
"location": self.location.serialize,
"created_timestamp": self.created_timestamp.isoformat() ,
"contact_email": self.contact_email,
"description": self.description,
"title": self.title,
"price": str(int(self.price)),
"image": self.image,
"category": self.category.serialize ,
}

make it ReSTFUL
@app.route('/ad/get', methods=['POST'])
def get_ad():
"""
Retrieves all the information about an ad.
"""
from db import Ad
ad = Ad.query.get(request.form.get("id"))
if ad:
return jsonify({"res": ad.serialize })
else:
return jsonify({
"res": False,
"error": "We are unable to find any classifieds near
you!",
})

create the tables
def init_db():
from db import db
db.create_all()

write the unit-tests
def test_ad_creation(self):
"""
Tests the API to create ads. Conveniently, also tests get ad api call.
"""
data = {
"long": randint(-360000000,360000000),
"lat": randint(-360000000,360000000),
"category": 5,
"email": "test@test.com",
"title": "Test Item " + random_string(),
"price": str(randint(0,1000)),
"image": open_file("sample_upload_pic.jpg"),
"description": " ".join([random_string() for i in range(10)]),
}

#create it
create_response = self.app.post("/ad/create", data=data)
response_dict = json.loads(create_response.data)
ad_id = response_dict["res"]

#retrieve it
res = self.app.post("/ad/get", data={"id": ad_id})
assert "id" in res.data

software stack:
1. SHPAML
2. SASS

software stack:
1. SHPAML
2. SASS
3. transcompiler-watcher

software stack:
1. SHPAML
2. SASS
4. Flask + its derivatives

software stack:
1. SHPAML
2. SASS
4. Flask + its derivatives
?. virtualenv
?. git

how does go about performing

rapid web dev, Questions?
the right way.

looking for a developers , and a marketing person.
nubela@ctrleff.com / @nubela / @ctrleff

Rapid web development, the right way.

More Related Content

What's hot

Viewers also liked

Similar to Rapid web development, the right way.

Recently uploaded

Rapid web development, the right way.