Reuse, Recycle: One Team’s Journey from Projects to Products

Successful internal tools are ones that your team knows exist. This is a story of one digital agency's use of the Ember JavaScript framework to execute creative applications very quickly while learning the dos and don'ts of product development.

Presented at EmberConf 2018.

Transcript

1. Reuse, Recycle. One Team’s Journey from Projects to Products Sarah Bostwick • March 2018 • EmberConf
2. Sarah Bostwick Creative Technologist, Developer, Artist www.pxlagency.com @FajitaFresca
21. Products are built and then sold Projects are sold and then built So why would you turn projects into products? To make more projects! What
22. Agencies, consultancies, freelancers Anyone using internal tools for repeated projects Who
23. Project -> Product -> Projects To create company assets - add value Revisit past work in an organized way Incremental, documented improvements Spend time polishing and being creative Why
24. Face-in-hole - internal product case study Checklist to decide when to commit Tips for templatizing a project Pitfalls Templates vs Addons Resources
25. www.animalancestry.com
27. Why it Worked Consistent Functionality and User Flow Template - able to customize, not locked in for creative Up to Date - ported features back to master Documentation - versions, wiki, installation guide Evangelism - whole team, business/creative/dev/social
50. Project to Product Checklist Similar projects requested multiple times Fast turnaround benefit from boilerplate Revisit past work for the good parts Mostly the same thing -> template Pick and choose -> addon
52. Pitfalls Designs and functionality change too much Product is too General Choosing a Template vs Addon
53. Templating Base App with defined User Flow Not just handlebars templates Specific but open
54. Naming Things is Hard Print out wireframes and cut up into components Work with UX designer to name things Create a google doc for the client with definitions of terms BEM - Block, Element, Modifier Living Style Guide
55. Templating Configuration Settings style sheets Initializers Services
56. styles components settings _colors.scss _defaults.scss _typography.scss Configuration Style Sheets
57. _typography.scss
58. Component Style sheets Component name = class name Stylesheet with the same name Automate - extend component generator blueprint _social-links.scss
64. Write the Docs writethedocs.org Portland Conference - May 6-8, 2018 Local meetups Technical writers Engineers Scientists
65. Sarah Mei Refactoring without permission. Clean your room and your code so you don’t live like a hoarder. Maintain a product as part of project scope.
66. Product Development Terminology Product Life Cycle Product Teams, Product Owner, Product Manager Agile, Scrum, Stories, Epics, Tasks, and Sprints Collective Fictions so we can work together Zwischenzugs.com
68. Thank You www.pxlagency.com @FajitaFresca