Your SlideShare is downloading. ×
0
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Rapid web development, the right way.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Rapid web development, the right way.

551

Published on

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.

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.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
551
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. how does go about performingrapid web dev,the right way.
  • 2. $ whoamiSteven Gohctrleff
  • 3. what makes it rapid?what is the right way?
  • 4. 1. super easy to prototype aka, does not get in your way.
  • 5. pythonprint(“hello world”)
  • 6. javaclass HelloWorldApp { public static void main(String[] args) { System.out.println("Hello World!"); }}
  • 7. 2. scalable
  • 8. 2. scalable collaborators will not be cursing (that much) at your shitty code base
  • 9. 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)
  • 10. 3. fun!!!!!!!! nuff said.
  • 11. android dev hackathon
  • 12. android dev hackathonsolo dev vs groups of 5wouldnt mind a new android tabletso... cheat!
  • 13. radar = phonegap = webapp
  • 14. web app = client-side + backend
  • 15. web app = client-side + backend
  • 16. web app = client-side + backend html css javascript
  • 17. HTMLis !@$#ing ugly and boring. i also think it is verbose.
  • 18. <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 theremote 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>launchingsoon</text>. </span> </div> </div>
  • 19. Disgusting eh?i wish...i have a pythonic html. indentation for nesting.something thats nice to work with css.
  • 20. Hello SHPAML.360 line python library.
  • 21. 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 theremote 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>launchingsoon</text>.
  • 22. CSS
  • 23. 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; }
  • 24. Not DRY.i wish...for variables. for functions. mixins.
  • 25. Hello SASS.its a gem.
  • 26. body background-color: #d2d2d2 .bodycontainer width: 1200px .left width: 430px float: left .appimg width: 430px .right width: 770px float: left
  • 27. //mixins for typography=subheader-font font-family: "Trebuchet MS"=content-font font-family: "Verdana"
  • 28. Javascriptjust use JQuery, and you are all good.
  • 29. shpaml + sass + javascript != html + css + javascript
  • 30. Hello transcompiler-watcherhttps://github.com/nubela/transcompiler-watcher
  • 31. (v_env)nubela@nubela-envy:~/Workspace/ctrleff-landing-page/scripts$ ./watcherTrasnscompiling: /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
  • 32. web app = client-side + backend ReST database
  • 33. Backendeasy to implement ReSTFUL interfaceORMunit-testingtemplatingsuper small overhead.
  • 34. Hello Flask.python microframework.
  • 35. declare the schemaclass 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")
  • 36. 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 , }
  • 37. 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 nearyou!", })
  • 38. create the tablesdef init_db(): from db import db db.create_all()
  • 39. write the unit-testsdef 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
  • 40. web app = client-side + backend
  • 41. software stack:
  • 42. software stack:1. SHPAML
  • 43. software stack:1. SHPAML2. SASS
  • 44. software stack:1. SHPAML2. SASS3. transcompiler-watcher
  • 45. software stack:1. SHPAML2. SASS3. transcompiler-watcher4. Flask + its derivatives
  • 46. software stack:1. SHPAML2. SASS3. transcompiler-watcher4. Flask + its derivatives?. virtualenv?. git
  • 47. how does go about performingrapid web dev, Questions?the right way.
  • 48. + + +
  • 49. looking for a developers , and a marketing person. nubela@ctrleff.com / @nubela / @ctrleff

×