Development Processes and Tooling
•
0 likes•343 views
My tech talk topic for Hack the North hackathon at University of Waterloo. Easily build MVPs with the right development processes and tooling support.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (10)
Similar to Development Processes and Tooling
Similar to Development Processes and Tooling (20)
Recently uploaded
Recently uploaded (20)
Development Processes and Tooling
- 1. Dev. Processes and Tooling Bora Bilgin
- 2. How to create an attack plan?
- 3. Getting to your first MVP
- 4. Development Ecosystem • Wireframing tools • Task tracker • Source Control & Client • Branching Strategy • Continuous Integration • Continuous Deployment • Build tools • Scaffolding tools • Documentation • Testing tools
- 5. Quick Sanity Check • Who is your audience • Can you find 10 users in this building? • What problem are you solving? • Check ProductHunt, hackernews, makeuseof • Do you really want to work on this problem? • Look beyond this weekend • Do not get attached to your solution
- 6. Wireframing Tools • Visualize your ideas • 1 pic = 1k words • Spot usability issues early
- 7. Wireframing Tools • Balsamiq • Free trial, very easy to use • Web based • Common mobile and web elements • UXPin • Professional grade design for web & mobile apps • Define user actions animations • Gives you clickable prototypes • 7 day trial • Microsoft Visio + OneNote
- 8. Task Tracker • Break down work into smaller chunks • Track effort and priority • Helps identify task/developer compatibility
- 9. Task Tracker • KanbanFlow • Free (no limitations), web based, easy to use • Pomodoro timer (25min work, 5 min break) • Visual progress reports • Waffle.io • Kanban with Github integration • Github issues automatically become tasks • Asana • Team conversation and task tracking in one place • Great for remote teams
- 10. Source Control “If the code isn't checked into source control, it doesn't exist” Jeff Atwood
- 11. Source Control • GitHub • Free public repositories (private repos with valid student account) • 1GB repository size limit. 100mb file limit • Integrates with Travis Continuous Integration • BitBucket • Free private repositories for teams of 5 • Integrates with JIRA (Atlassian) issue tracker • GitLab • Free private repositories for any teams • Integrated Continuous Integration tool • Online file editing
- 12. Source Control Client • Use the same client app if possible • Atlassian SourceTree • Graphical Git client • Extremely easy to use • Windows or Mac • GitHub Desktop • Windows or Mac • GitHub client only • First version
- 14. Continuous Integration and Deployment • Continuous Integration runs test in each commit • Continuous Deployment deploys to staging in each commit • Both will save time significantly • Suggested to setup CI/CD after the hackathon – focus on your MVP first • Affects your Source Control decision • GitHub integrates with Travis CI • GitLab has its own CI • You can use TeamCity or Jenkins alternatively • AppVeyor for .NET projects (free for open source projects) • All of the above can run tests and deploy
- 15. Code Scaffolding • Allows you to get up and running quickly with a skeleton app • Most scaffolding tools follow good/best practices • Yeoman • Thousands of generators for web projects • AngularJS, React, MEAN, Backbone, Flex, etc.. • npm install –g yo • Jhipster • Yeoman generator for Java backend with Angular frontend • Ionic Framework • Cross platform web based mobile apps with AngularJS • Phonegap Build • Cross platform web based web and mobile apps • Not limited to AngularJS
- 16. Build Tools • Grunt and Gulp • JavaScript task runners • Used to automate deployment tasks • Features: • Local web server • Live reload on file change • Automatic minification and bundling • Creating a distribution package • Included in most yeoman generators
- 17. Documentation and Communication • A project is a series of decisions which shape the codebase • Decisions can be easily forgotten • Keep short notes of feature descriptions and decisions • GitHub, BitBucket and GitLab all come with a wiki • Alternatively use Google Docs • Reuse your wireframes! • Keep a single document for all your team standup notes • Be creative – you can record short videos as well • Use Slack for team communication
- 18. Testing and Presentation • Perception is the reality • Testing • Test each feature immediately after implementation • Plan for writing tests after the hackathon • Utilize automated visual testing tools, such as Ranorex, Visual Studio Test Tools • Utilize end to end testing frameworks such as Protractor (for Angular/web apps) • For ionic/phonegap projects, use GapDebug • Presentation • Ideal to write an outline of your presentation • Do not change your presentation environment (laptop, hardware, diff. account) • Tell your story – focus on why and what problem you’re solving • Rehearse a few times
- 19. Finalizing Your Tech Stack • Learn from the pros (stackshare.io)
- 20. Building an MVP – The Iterative Way • Release often, get feedback, provide value to users
- 21. TLDL; (too long, didn’t listen) • Use a wireframing tool to visualize your ideas • Get feedback before implementation! • Use a Kanban board for task tracking • Setup source control • Scaffold your application and start coding • Release a version before Sunday. Reiterate on your features, get feedback • Setup proper testing & deployment environment after the hackathon • Infusion team is here to help!
- 22. Thank You Download deck: http://goo.gl/clqtcq
Editor's Notes
- To create an attack plan, you need an idea first – an idea, or a problem that you want to work on this weekend so that you can build project around it. A great idea is the first step to success. Having a brilliant idea will increase your chances of building a great application. But an idea is not enough. There’s one more thing that you need to be aware of.
- A brilliant idea has to be complemented by a brilliant execution plan. The real value of your project will be in your execution. How you execute your idea will determine what your application is worth. And the first step to execution is building a development ecosystem that would help you along the way.
- A development ecosystem is the tools and processes that you use during your implementation. These are the tools that will help you ship better products without a hassle. What is in your development ecosystem? Which tools or processes are you planning to use?
- Before you start writing your first line of code, ask yourself these questions. Do not start until you feel comfortable with the answers.
- Helps you visualize your ideas, which will increase creativity Help you get “in sync” with your team members. (red button with rounded corners) Helps you identify common usability problems easily Helps you identify workflow e.g. how does a user sign up You can show it to users or the judges and get some feedback
- Allows you to break down work into smaller chunks Allows you to “pause” working (it will give you history) Allows you to track time spent and prioritize tasks Helps group tasks into releases (or MVPs) Helps identify task/developer compatibility Kanban board: use swimlanes such as backlog, in progress, done and done done
- Allows you to: Maintain different versions of your product (production, development, beta etc.) Automatically backup your codebase Revert a problematic change Share code with others Make changes to code written by others Experiment with new features without interfering with working code Maintain work history
- Master – production code Develop – code that is in development Feature branches – specific feature implementations You can stop working on a feature if things don’t go as planned, and your production code will not be affected
- Creates a local web server Allows “live reload” of your app when a file changes Grunt focuses on configuration, while Gulp focuses on code Most practical uses: Automatic index.html generation CSS and JS minification and bundling Creating a distribution package for staging and production Most Yeoman generators include a grunt or gulp setup – pick an existing one
- A project is a series of decisions which shape the codebase Decisions can be easily forgotten Documentation will help future team members If you release your MVP, your users will benefit from the documentation as well Keep short notes of feature descriptions and decisions GitHub, BitBucket and GitLab all come with a wiki Alternatively use Google Docs Reuse your wireframes! Keep a single document for all your team standup notes Be creative – you can record short videos as well Use Slack for team communication