rapid web development, the right way
DESCRIPTION
The founder of ctrleff demonstrates his methodology of web development that has evolved through the years to find the perfect balance between speed and scalability.TRANSCRIPT
rapid web dev,the right way.
how does go about performing
$ whoami
Steven Gohctrleff
what makes it rapid?what is the right way?
1. super easy to prototypeaka, 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. scalablecollaborators will not be cursing (that much) at your shitty code base
2. scalablecollaborators 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 5wouldn't mind a new android tabletso... cheat!
radar = phonegap = webapp
web app = client-side + backend
web app = client-side + backend
web app = client-side + backendhtml
css
javascript
HTMLis !@$#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.
bodydiv#wrap
div.bodycontainer#maindiv.left
> img.appimg src="/static/images/menu_less_shadow.png" div.right
div.introHello You,
div.contentdiv.graybox
span.firstRemember 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>.
CSS
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.
bodybackground-color: #d2d2d2 .bodycontainer
width: 1200px
.leftwidth: 430pxfloat: left
.appimgwidth: 430px
.rightwidth: 770pxfloat: left
//mixins for typography
=subheader-font font-family: "Trebuchet MS"
=content-font font-family: "Verdana"
Javascriptjust use JQuery, and you are all good.
shpaml + sass + javascript!= html + css + javascript
Hello transcompiler-watcherhttps://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.shpamlTrasnscompiling: /home/nubela/Workspace/ctrleff-landing-page/src/templates/home.shpamlTrasnscompiling: /home/nubela/Workspace/ctrleff-landing-page/src/static/css/colors.sassTrasnscompiling: /home/nubela/Workspace/ctrleff-landing-page/src/static/css/typography.sassTrasnscompiling: /home/nubela/Workspace/ctrleff-landing-page/src/static/css/main.sass
web app = client-side + backendReST
database
Backendeasy to implement ReSTFUL interfaceORMunit-testingtemplatingsuper 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. SHPAML2. SASS
software stack:1. SHPAML2. SASS3. transcompiler-watcher
software stack:1. SHPAML2. SASS3. transcompiler-watcher4. Flask + its derivatives
software stack:1. SHPAML2. SASS3. transcompiler-watcher4. Flask + its derivatives
?. virtualenv?. git
rapid web dev,the right way.
how does go about performing
Questions?
+ +
+
