Rapid web development, the right way.

796 views

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.

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

No Downloads
Views
Total views
796
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Rapid web development, the right way.

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

×