Building apps with ease...

Ronen Amiel

Who are you?

• Developer @wix
• Developing the wix app market platform
• Rank 140 battlefield gamer

Agenda

• The problem: creating, developing and deploying a web app quickly and efficiently
• The solution: an overview (+ live examples) about Yeoman, Bower, and Grunt 

Let's start a new project

• Duplicate an existing project, change file and folder names, download 3rd party dependencies
• Compile stuff (sass, coffeescript) as we develop, run tests, refresh the page
• Finally compile everything, run tests, minify and concatenate javascript, make image optimisations and deploy to production 

You're doing it wrong

• Automating these tasks will save you time and money
• It will also make your development process a lot more fun
• New developers will be able to dive into projects quicker

Yeoman

In the United States, yeomen were identified in the 18th and 19th centuries as non-slaveholding, small landowning, family farmers - Wikipedia

Now seriously

• Yeoman is a scaffolding tool for web apps
• It uses generators, each generator can generate a different type of app (angular, backbone, chrome extension, wix app)
• You can also create your own generators
• Generates parts for an existing app, not just the whole app
• Brings a lot of best practices for building a web app

Bower

• Bower is a front end package manager
• It helps us get our client-side dependencies (jquery, angular, wix ui lib)
• Over 6,000 packages already use bower!
• Installs every component once (not like npm, might get conflicts)
• You can also publish your own packages to bower or create your own private bower repo

More into bower

• Dependencies and their version are defined in a bower.json file
• Configuration per project can be defined in a .bowerrc file
• You don't need to keep dependencies in your project anymore
• All developers (and production) will have the same versions (keep an eye on ~)

Grunt

• Grunt is a JavaScript task runner
• It helps you automate your workflows
• Uses plugins to do tasks: running tests, compiling (sass, coffeescript), minify JavaScript, refresh your page
• Uses a Gruntfile.js to define and configure tasks for your projects

Let's look at a Gruntfile

The end

Questions?