Remember that dingy burger place around the
remote corner that was surprisingly cheap and good ?
Me Neither.
Nor your best friend.
Soon you can. We are launching
soon.
Slide 1
Slide 1 text
rapid web dev,
the right way.
how does go about performing
Slide 2
Slide 2 text
$ whoami
Steven Goh
ctrleff
Slide 3
Slide 3 text
what makes it rapid?
what is the right way?
Slide 4
Slide 4 text
1. super easy to prototype
aka, does not get in your way.
Slide 5
Slide 5 text
print(“hello world”)
python
Slide 6
Slide 6 text
class HelloWorldApp {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
java
Slide 7
Slide 7 text
2. scalable
Slide 8
Slide 8 text
2. scalable
collaborators will not be cursing (that much) at your shitty code base
Slide 9
Slide 9 text
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)
Slide 10
Slide 10 text
3. fun!!!!!!!!
nuff said.
Slide 11
Slide 11 text
android dev hackathon
Slide 12
Slide 12 text
android dev hackathon
solo dev vs groups of 5
wouldn't mind a new android tablet
so... cheat!
Slide 13
Slide 13 text
radar = phonegap = webapp
Slide 14
Slide 14 text
web app = client-side + backend
Slide 15
Slide 15 text
web app = client-side + backend
Slide 16
Slide 16 text
web app = client-side + backend
html
css
javascript
Slide 17
Slide 17 text
HTML
is !@$#ing ugly and boring. i also think it is verbose.
Slide 18
Slide 18 text
Hello You,
Slide 19
Slide 19 text
Disgusting eh?
i wish...
i have a pythonic html. indentation for nesting.
something that's nice to work with css.
i wish...
Slide 20
Slide 20 text
Hello SHPAML.
360 line python library.
Slide 21
Slide 21 text
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 launching
soon.
Slide 22
Slide 22 text
CSS
Slide 23
Slide 23 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; }
Slide 24
Slide 24 text
Not DRY.
i wish...
for variables. for functions. mixins.
Slide 25
Slide 25 text
Hello SASS.
its a gem.
Slide 26
Slide 26 text
body
background-color: #d2d2d2
.bodycontainer
width: 1200px
.left
width: 430px
float: left
.appimg
width: 430px
.right
width: 770px
float: left
Slide 27
Slide 27 text
//mixins for typography
=subheader-font
font-family: "Trebuchet MS"
=content-font
font-family: "Verdana"
Slide 28
Slide 28 text
Javascript
just use JQuery, and you are all good.
Slide 29
Slide 29 text
shpaml + sass + javascript
!= html + css + javascript
Slide 30
Slide 30 text
Hello transcompiler-watcher
https://github.com/nubela/transcompiler-watcher
Slide 31
Slide 31 text
(v_env)nubela@nubela-envy:~/Workspace/ctrleff-landing-page/scripts$ ./watcher
Trasnscompiling: /home/nubela/Workspace/ctrleff-landing-
page/src/templates/influence.shpaml
Trasnscompiling: /home/nubela/Workspace/ctrleff-landing-
page/src/templates/home.shpaml
Trasnscompiling: /home/nubela/Workspace/ctrleff-landing-
page/src/static/css/colors.sass
Trasnscompiling: /home/nubela/Workspace/ctrleff-landing-
page/src/static/css/typography.sass
Trasnscompiling: /home/nubela/Workspace/ctrleff-landing-
page/src/static/css/main.sass
Slide 32
Slide 32 text
web app = client-side + backend
ReST
database
Slide 33
Slide 33 text
Backend
easy to implement ReSTFUL interface
ORM
unit-testing
templating
super small overhead.
Slide 34
Slide 34 text
Hello Flask.
python microframework.
Slide 35
Slide 35 text
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")
declare the schema
Slide 36
Slide 36 text
@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 em serializable
Slide 37
Slide 37 text
@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!",
})
make it ReSTFUL
Slide 38
Slide 38 text
def init_db():
from db import db
db.create_all()
create the tables
Slide 39
Slide 39 text
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": "[email protected]",
"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
write the unit-tests
Slide 40
Slide 40 text
web app = client-side + backend
Slide 41
Slide 41 text
software stack:
Slide 42
Slide 42 text
software stack:
1. SHPAML
Slide 43
Slide 43 text
software stack:
1. SHPAML
2. SASS
Slide 44
Slide 44 text
software stack:
1. SHPAML
2. SASS
3. transcompiler-watcher
Slide 45
Slide 45 text
software stack:
1. SHPAML
2. SASS
3. transcompiler-watcher
4. Flask + its derivatives
Slide 46
Slide 46 text
software stack:
1. SHPAML
2. SASS
3. transcompiler-watcher
4. Flask + its derivatives
?. virtualenv
?. git
Slide 47
Slide 47 text
rapid web dev,
the right way.
how does go about performing
Questions?
Slide 48
Slide 48 text
+ +
+
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
looking for a developers , and a marketing person.
[email protected] / @nubela / @ctrleff