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?

Made with Slides.com