Rapid web development, the right way.

rapid web dev, the right way. how does go about
performing

$ 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.

print(“hello world”) python

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

2. scalable

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)

3. fun!!!!!!!! nuff said.

android dev hackathon

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

radar = phonegap = webapp

web app = client-side + backend

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. i wish...

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.

Hello SASS. its a gem.

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 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

web app = client-side + backend ReST database

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

Hello Flask. python microframework.

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

@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

@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

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

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

web app = client-side + backend

software stack:

software stack: 1. SHPAML

software stack: 1. SHPAML 2. SASS

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

software stack: 1. SHPAML 2. SASS 3. transcompiler-watcher 4. Flask
+ its derivatives

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

rapid web dev, the right way. how does go about
performing Questions?

looking for a developers , and a marketing person. [email protected]
/ @nubela / @ctrleff

Rapid web development, the right way.

Rapid web development, the right way.

Other Decks in Programming

Featured

Transcript