Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PRODUCT!
THE ROAD TO PRODUCTION DEPLOYMENT
presented by /Filippo Zanella @r4m
WHO I AM
Ph.D. in Information Engineering at the
, Visiting Researcher
at UC Berkeley and UC Santa Barbara.
University of ...
SELLF
Sellf helps people in sales monitor
their deals and manage their
activities to grow and close them.
Small business o...
PROTOTYPING
BE STUBBORN ON VISION BUT FLEXIBLE ON DETAILS.
(JEFF BEZOS, AMAZON)
THE ARDUINO WAY
A prototype is meant to be a test. Built using the most
"hacky" approach with the least amount of time to ...
CONCEPT
Handmade sketch of the data visualization of the app.
BACKBONE
Try to de ne as much as you can:
Infrastructure
Communication protocol
Database schema
UX ow
WIREFRAMES
Detailed descriptions of the different views of the app.
(BALSAMIQ) MOCKUPS
MINIMUM VIABLE PRODUCT
IF YOU AREN'T EMBARRASSED BY THE FIRST VERSION OF THE PRODUCT YOU'VE LAUNCHED TOO LATE.
(REID HOFFM...
MVP
It is built from the smallest set of features that delivers
customer early adopters value.
More than 60% of features i...
SAAS, BAAS, PAAS, IAAS
Software as a Service (Sellf, Google Apps, GoToMeeting)
Backend as a Service (Parse, Apprenda)
Plat...
PRODUCT
IT IS NOT ABOUT BITS, BYTES AND PROTOCOLS, BUT PROFITS, LOSSES AND MARGINS.
(LOU GERSTNER, IBM)
WHEN THE HEAT GETS HOT
You cannot survive with (too) buggy and clumsy code.
You slightly move from MVP and beta releases t...
SELLF 3.0
LOGGING & ALERTING
Log activities of your app to nd:
failures
bugs
heavy algorithms
expensive queries
unwanted/unexpected ...
USER BEHAVIOR MONITORING
What people really do with your application.
PERFORMANCE MONITORING
Nobody writes slow code on purpose.
AVAILABILITY MONITORING
How do you know when your app has an outage?
ERRORS HANDLING
Anticipate, detect, resolve BUGS.
NETWORK ERRORS
$.ajax({
type: 'POST',
url: '/some/resource',
success: function(data, textStatus) {
// Handle success
},
er...
PLATFORM ERRORS
FRAMEWORK ERRORS
LIBRARY ERRORS...
...LIBRARY REPLACEMENT
In the long run, libraries are like a stick in the mud:
not longer maintained
degrade performance
m...
YOUR ERRORS
The bloody asynchrony
callAction: function() {
var _this, defer;
_this = this;
defer = Ember.RSVP.defer();
def...
MAINTAIN 3RD-PARTY SOFTWARE UPDATED
When the project relies on external software, it's useful to
leverage the updates, for...
CHANGELOG
Record of all the changes made to a project.
Now the inline form can be use in addiction:
EXAMPLE OF BUMPING
Prior v1.11 in Ember's an ifcondition in a template was
li...
SECURITY
The Gartner Group however estimates that 75% of attacks
are at the web application layer, and found out "that out...
SQL INJECTION
A technique where malicious users can inject SQL commands
into an SQL statement, via web page input.
Client
...
SSL
The Secure Socket Layer is a cryptographic protocol designed
to provide secure communications over a computer network....
SCALING
It means rapid adaptation to a growing user activity.
You need to push your system to a higher level, getting the ...
APOCALYPSE NOW
You'll never be ready till the day you have to.
HARD STUFFS
Load balancing, caching, CDN, background jobs, ...
... sharding, master/slaves, ETAGs, etc.
TEAM GROWTH
Being agile is mandatory when your team growths to stay
focused in delivering real value to the company
No was...
THE PROJECT TRIANGLE
OPTIMIZATION
IMPROVING PERFORMANCES
An optimization analysis should include:
network utilisation
CPU
memory usage
database query
Optimi...
CODING TRICKS
Parallel versus sequential assignment
var a, b = 1, 2 a= 1, b = 2
5821.3 (±6.0%) i/s 8010.3 (±5.5%) i/s
slow...
LOADING TIMES
Google Developer Tools (via Chrome)
UI DRAINING RESOURCE
In a single-page framework, template rendering choices can
make the difference in terms of RAM usage....
UI DRAINING RESOURCE
Destroy not visibile child views to free up their memory.
<ul>
{{#each alumni as |alumnus|}}
<li>
<p>...
CROSS COMPATIBILITY
The (W3C), founded in 1994 to
promote open standards for the , pulled ,
together with others to develo...
TEST DRIVEN DEVELOPMENT
If you avoid at the beginning TDD practices, you'll discover
that they are as much important as th...
UNIT TESTS
They are generally used to test a small piece of code and
ensure that it is doing what was intended.
App.SomeTh...
REFACTORING
Improving the design of code without changing its behavior.
Clarity enables performance:
long methods
speculat...
REMOVE DUPLICATION
if (this.target.entity.is("decoration")) {
this.target.entity.game.publish("decoration/showBoost", {
en...
USE MEANINGFUL NAMES
var p = this.current.params;
var r = this.current.results;
if (r.restProduct) {
p.query = r.prestProd...
THANK YOU!
Upcoming SlideShare
Loading in …5
×

Product! - The road to production deployment

218 views

Published on

The development of a product from the point of view of a technician, starting from the concept, passing to the minimum viable till a management of a fully operational and deployed app.

Published in: Software
  • Be the first to comment

Product! - The road to production deployment

  1. 1. PRODUCT! THE ROAD TO PRODUCTION DEPLOYMENT presented by /Filippo Zanella @r4m
  2. 2. WHO I AM Ph.D. in Information Engineering at the , Visiting Researcher at UC Berkeley and UC Santa Barbara. University of Padua Founder of , full-stack engineer (RubyOnRails & Ember.js). Sellf srl President of the and Member of the . Fencing Club of Montebelluna Rotary Club of Montebelluna
  3. 3. SELLF Sellf helps people in sales monitor their deals and manage their activities to grow and close them. Small business owners, professionals and sales agents usually struggle to keep their business life organized, overwhelmed by spreadsheets, todo lists, calendars and notes.
  4. 4. PROTOTYPING BE STUBBORN ON VISION BUT FLEXIBLE ON DETAILS. (JEFF BEZOS, AMAZON)
  5. 5. THE ARDUINO WAY A prototype is meant to be a test. Built using the most "hacky" approach with the least amount of time to get initial feedback on whether a concept is viable. Copyright © 2006-2011 by John Szakmeister
  6. 6. CONCEPT Handmade sketch of the data visualization of the app.
  7. 7. BACKBONE Try to de ne as much as you can: Infrastructure Communication protocol Database schema UX ow
  8. 8. WIREFRAMES Detailed descriptions of the different views of the app.
  9. 9. (BALSAMIQ) MOCKUPS
  10. 10. MINIMUM VIABLE PRODUCT IF YOU AREN'T EMBARRASSED BY THE FIRST VERSION OF THE PRODUCT YOU'VE LAUNCHED TOO LATE. (REID HOFFMAN, LINKEDIN)
  11. 11. MVP It is built from the smallest set of features that delivers customer early adopters value. More than 60% of features in software products are rarely or never used. Prioritize each feature according to a few factors: 1. How important is this feature for nishing the process? 2. How often will the feature be used? 3. How many users will use this feature? 4. How much value will the feature bring to the customer? 5. How risky is this feature? 6. How much time does it take to be implemented?
  12. 12. SAAS, BAAS, PAAS, IAAS Software as a Service (Sellf, Google Apps, GoToMeeting) Backend as a Service (Parse, Apprenda) Platform as a Service (AWS Beanstalk, Heroku) Infrastructure as a Service (AWS EC2, Microsoft Azure)
  13. 13. PRODUCT IT IS NOT ABOUT BITS, BYTES AND PROTOCOLS, BUT PROFITS, LOSSES AND MARGINS. (LOU GERSTNER, IBM)
  14. 14. WHEN THE HEAT GETS HOT You cannot survive with (too) buggy and clumsy code. You slightly move from MVP and beta releases to a working app that your customer expect to be: fast secure stable While you see your user base increasing, you see their expectations growing too.
  15. 15. SELLF 3.0
  16. 16. LOGGING & ALERTING Log activities of your app to nd: failures bugs heavy algorithms expensive queries unwanted/unexpected behaviors Set alerts to be noti ed when speci c events occur. Building an ef cient logging and alerting system allows your team to nd and x problems quickly.
  17. 17. USER BEHAVIOR MONITORING What people really do with your application.
  18. 18. PERFORMANCE MONITORING Nobody writes slow code on purpose.
  19. 19. AVAILABILITY MONITORING How do you know when your app has an outage?
  20. 20. ERRORS HANDLING Anticipate, detect, resolve BUGS.
  21. 21. NETWORK ERRORS $.ajax({ type: 'POST', url: '/some/resource', success: function(data, textStatus) { // Handle success }, error: function(xhr, textStatus, errorThrown) { if (xhr.status) { if (xhr.status === 403) { // Handle forbidden access error } else { // Handle generic error } } } });
  22. 22. PLATFORM ERRORS
  23. 23. FRAMEWORK ERRORS
  24. 24. LIBRARY ERRORS...
  25. 25. ...LIBRARY REPLACEMENT In the long run, libraries are like a stick in the mud: not longer maintained degrade performance missing custom needs not easy to debug
  26. 26. YOUR ERRORS The bloody asynchrony callAction: function() { var _this, defer; _this = this; defer = Ember.RSVP.defer(); defer.promise.then(function() { if (_this && !_this.isDestroyed) { return _this.set('isLoaded', true); } }, function() { if (_this && !_this.isDestroyed) { return _this.set('isLoaded', false); } }); }
  27. 27. MAINTAIN 3RD-PARTY SOFTWARE UPDATED When the project relies on external software, it's useful to leverage the updates, for: Fix bugs (not caused by our app) Improve overall performances Adding new features Deprecate old conventions
  28. 28. CHANGELOG Record of all the changes made to a project.
  29. 29. Now the inline form can be use in addiction: EXAMPLE OF BUMPING Prior v1.11 in Ember's an ifcondition in a template was limited to the following syntax: {{#if isEnabled}} <a class="active" href="http://www.facebook.com">Facebook</a> {{else}} <a class="disabled" href="http://www.facebook.com">Facebook</a> {{/if}} <a class="{{if isEnabled 'active' 'disabled'}}" href="http://www.facebook.com" simpli ng the number of lines of code, enhancing readability and allowing new behaviours.
  30. 30. SECURITY The Gartner Group however estimates that 75% of attacks are at the web application layer, and found out "that out of 300 audited sites, 97% are vulnerable to attack". The threats against web applications include: user account hijacking bypass of access control reading or modifying sensitive data presenting fraudulent content
  31. 31. SQL INJECTION A technique where malicious users can inject SQL commands into an SQL statement, via web page input. Client <p>UserId: <br> <input type="text" name="UserId" value="105 or 1=1"></p> Server SELECT * FROM Users WHERE UserId = 105 or 1=1 The SQL above is valid. It will return all rows from the table Users, since WHERE 1=1 is always true!
  32. 32. SSL The Secure Socket Layer is a cryptographic protocol designed to provide secure communications over a computer network. Serve everything over SSL. PS: don't let your certi cates expire.
  33. 33. SCALING It means rapid adaptation to a growing user activity. You need to push your system to a higher level, getting the best from your infrastructure.
  34. 34. APOCALYPSE NOW You'll never be ready till the day you have to.
  35. 35. HARD STUFFS Load balancing, caching, CDN, background jobs, ... ... sharding, master/slaves, ETAGs, etc.
  36. 36. TEAM GROWTH Being agile is mandatory when your team growths to stay focused in delivering real value to the company No wasting time on unneeded planning docs. No delivering features that do not t customers needs.
  37. 37. THE PROJECT TRIANGLE
  38. 38. OPTIMIZATION
  39. 39. IMPROVING PERFORMANCES An optimization analysis should include: network utilisation CPU memory usage database query Optimizing is critical because it has an impact on the scaling factor of the system!
  40. 40. CODING TRICKS Parallel versus sequential assignment var a, b = 1, 2 a= 1, b = 2 5821.3 (±6.0%) i/s 8010.3 (±5.5%) i/s slow fast 40% faster!
  41. 41. LOADING TIMES Google Developer Tools (via Chrome)
  42. 42. UI DRAINING RESOURCE In a single-page framework, template rendering choices can make the difference in terms of RAM usage. <ul> {{#each alumni as |alumnus|}} <li> <p>Hello, {{alumnus.name}}!</p> <!-- This is RAM consuming... --> <div>{{detailed-profile content=alumnus}}</div> </li> {{/each}} </ul>
  43. 43. UI DRAINING RESOURCE Destroy not visibile child views to free up their memory. <ul> {{#each alumni as |alumnus|}} <li> <p>Hello, {{alumnus.name}}!</p> <!-- Show the details only when the alumnus is selected --> {{#if view.isSelected}} <div>{{detailed-profile content=alumnus}}</div> {{/if}} </li> {{/each}} </ul>
  44. 44. CROSS COMPATIBILITY The (W3C), founded in 1994 to promote open standards for the , pulled , together with others to develop a standard for browser scripting languages called " ". World Wide Web Consortium WWW Netscape Microsoft ECMAScript
  45. 45. TEST DRIVEN DEVELOPMENT If you avoid at the beginning TDD practices, you'll discover that they are as much important as the app code itself. Continuous integration and testing is a must sooner or later. Tests can be applied to: backend - just do it. frontend - think about it. mobile - forget it.
  46. 46. UNIT TESTS They are generally used to test a small piece of code and ensure that it is doing what was intended. App.SomeThing = Ember.Object.extend({ foo: 'bar', testMethod: function() { this.set('foo', 'baz'); } }); module('Unit: SomeThing'); test('calling testMethod updates foo', function() { var someThing = App.SomeThing.create(); someThing.testMethod(); equal(someThing.get('foo'), 'baz'); });
  47. 47. REFACTORING Improving the design of code without changing its behavior. Clarity enables performance: long methods speculative code comments When you look back to your one-year old code you look at it with the same compassion with whom you look at a photo of you a few years before: you wonder how the hell you could get those clothes and that hairstyle.
  48. 48. REMOVE DUPLICATION if (this.target.entity.is("decoration")) { this.target.entity.game.publish("decoration/showBoost", { entityView: this.target, x: this.target.entity.x, y: this.target.entity.y }); } var entity = this.target.entity; if (entity.is("decoration")) { entity.game.publish("decoration/showBoost", { entityView: this.target, x: entity.x, y: entity.y }); }
  49. 49. USE MEANINGFUL NAMES var p = this.current.params; var r = this.current.results; if (r.restProduct) { p.query = r.prestProduct; } var params = this.current.params; var results = this.current.results; if (results.restProduct) { params.query = results.prestProduct; }
  50. 50. THANK YOU!

×