HTML5 Rocks

HTML5 Rocks

The Yeoman Monthly Digest #3

By Addy Osmani at

Allo! Allo! This past month saw the Yeoman community grow to 472 generators. We’re excited to see so much passion for project scaffolding and are working on some new features to enable generators to extend and build on top of each other.

We’ll talk more about this soon, but for now here’s this month’s round-up of featured articles, generators and team blogs. We hope they’re useful!

From the Team blog

Exploring A Generator For Gulp.js

Generators New Year Cleanup!

Updates To Our Grunt, Bootstrap & Other Generators

Yeoman Q1 2014 Roadmap and Roadmap For The Angular Generator

What's New In The Backbone Generator

Sindre Sorhus also created envcheck - a useful environment checker that will double-check you have everything needed to run Yeoman smoothly.

Articles

This month the community have been building full-stack webapps, Hybrid apps and even a remote desktop client with Yeoman generators. We enjoyed reading:

A Remote Desktop Client with AngularJS and Yeoman

Angular Fullstack 1.2.0 available now

Automating React With Yeoman and Grunt

Cordova + Yeoman Web Best Practices v2.0

Building a new Yeoman generator

Goodbye, Sprockets! A Grunt-based Rails Asset Pipeline

Using Yeoman along with the ng-book

Yo Polymer – A Whirlwind Tour Of Web Component Tooling

Should Yeoman Split Up It's Gruntfiles?

A Workshop On Bower, Yeoman And Flight

Samsung Smart TV app generator for Yeoman

Using Yeoman to scaffold out new websites

Announcing generator-angular-require

Web App with dream team; AngularJS, Cordova, Yeoman & Topcoat

Using the European npm mirror

Scaffold your projects with Yeoman…

Why use Yeoman?

Simple Scaffolding with the Ignite UI Yeoman Generator

Improving Your Development Workflow with Yeoman

Why you should use Yeoman

AngularJS, PhoneGap and my mobile toolset

Featured Generators

This month also saw new generators released for KrakenJS, Meteor, ChaplinJS and a number of other projects. Some of our choice picks:

Scaffold KrakenJS projects

A ChaplinJS generator

Scaffold ESLint rules

Scaffolding for Meteor projects

Scaffold Gulp plugins

Scaffold Gulp files

Scaffold KendoUI apps

Radian ~ A scalable AngularJS framework with a Yeoman generator

Scaffolding for Android

Scaffold Angular + Firebase apps

A generator for DocPad projects

Automating and Provisioning AWS Infrastructure for HTML5 Apps With Yeoman

A generator for mobile webapps

Scaffold slides with the Google I/O template

Simple webapp generator for Yeoman

Yeoman WordPress theme generator – kickstart a grunting SCSS theme

Scaffold Closure projects

Scaffolding for Gulp webapps

An ExpressionEngine Add-on generator

Scaffold AMD projects

Scaffold Finatra apps

Scaffold pattern libraries

Finally, updates have also been made to our official Ember.js, Mobile WebApp and Karma generators. Changelogs for all of them will be landing soon.

Until next time

If you’ve written an article, given a talk or created a generator you think would be useful to others, please feel free to share it with us on Twitter or Google+. We’re always interested in seeing how our tools are used.

Until the next time we run yo digest, happy scaffolding and don't be afraid - Yeoman is here to help, not replace you :D

With thanks for the rest of the Yeoman team for their reviews

Yo Polymer – A Whirlwind Tour Of Web Component Tooling

By Addy Osmani at

Web Components are going to change everything you think you know about building for the web. For the first time, the web will have low level APIs allowing us to not only create our own HTML tags but also encapsulate logic and CSS. No more global stylesheet soup or boilerplate code! It’s a brave new world where everything is an element.

In my talk from DotJS, I walk through what Web Components have to offer and how to build them using modern tooling. I’ll show you Yeoman, a workflow of tools to streamline creating web-apps using Polymer, a library of polyfills and sugar for developing apps using Web Components in modern browsers today.

Create custom elements & install elements created by others

In this talk you will learn:

  • About the four different specs composing Web Components: Custom Elements, Templates, Shadow DOM and HTML imports.
  • How to define your own custom elements and install elements created by others using Bower
  • Spend less time writing JavaScript and more time constructing pages
  • Use modern front-end tooling (Yeoman) to scaffold an application using Polymer with generator-polymer
  • How Polymer super changes creating web components.

For example, to install Polymer's Web Component polyfills and the library itself, you can run this one liner:

bower install --save Polymer/platform Polymer/polymer

This adds a bower_components folder and adds the above packages. --save adds them to your app's bower.json file.

Later, if you wanted to install Polymer's accordion element you could run:

bower install --save Polymer/polymer-ui-accordion

and then import it into your application:

<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">

To save time, scaffolding out a new Polymer app with all the dependencies you need, boilerplate code and tooling for optimizing your app can be done with Yeoman with this other one liner:

yo polymer

Bonus walkthrough

I also recorded a 30 minute bonus walkthrough of the Polymer Jukebox app I show in the talk.

Covered in the bonus video:

  • What the “everything is an element” mantra means
  • How to use Bower to install Polymer’s Platform polyfills and elements
  • Scaffolding our Jukebox app with the Yeoman generator and sub-generators
  • Understanding the platform features scaffolded out via boilerplate
  • How I functionally ported over an Angular app over to Polymer.

We also make use of Yeoman sub-generators for scaffolding our new Polymer elements. e.g to create the boilerplate for an element foo we run:

yo polymer:element foo

which will prompt us for whether we would like the element automatically imported, whether a constructor is required and for a few other preferences.

The latest sources for the app shown in both talks are now up on GitHub. I’ve refactored it a little further to be more organized and a little more easy to read.

Preview of the app:

Further reading

In summary, Polymer is a JavaScript library that enables Web Components now in modern web browsers as we wait for them to be implemented natively. Modern tooling can help improve your workflow using them and you might enjoy trying out Yeoman and Bower when developing your own tags.

A few other articles that are worth checking out on the subject:

The Yeoman Monthly Digest #2

By Addy Osmani at

Allo’ Allo’ and Happy Holidays! Welcome to the second issue of the Yeoman monthly digest – our regular round-up of articles, tips, generators and videos to help you stay on top of what’s new with your favourite man-in-a-hat. We hope you find the updates below helpful!

Grunt pro-tips

It’s tempting to try every Grunt plug-in out there – there’s a bajillion! It’s also easy to get carried away. Before you know it, you’re staring at your terminal far longer than you used to be, waiting for your tasks to complete. It can be frustrating during your build, but super frustrating during your watch.

Fortunately, the community has been working towards speeding up your development cycle even more.

  • Reduce your Grunt compilation time with this custom task trick
  • Use grunt-newer to only run Grunt tasks on files that changed
  • Run tasks concurrently with grunt-concurrent so multiple tasks can be run simultaneously

Some other tips:

Videos

Articles

Generators

yo 1.0.7-pre is now available for testing on npm and we look forward to talking more about our roadmap for 2014 in the coming weeks. In the mean time, there's lots of juicy new updates to both our official generators and those you've been authoring below.

Official generator updates

  • Backbone 0.2.2 released with RequireJS + CoffeeScript support & --appPath option
  • AngularJS 0.7.1 with support for Angular 1.2.6 and grunt-bower-install
  • Ember.js 0.8.0 released. Scaffolding updated to Ember 1.2 syntax, improved CoffeeScript support, templating, REST routes
  • WebApp 0.4.5 and 0.4.6 including improved HTMLMin, bower install fixes and grunt-bower-install support for CSS dependencies
  • Polymer generator 0.0.8 with Web Component concatenization and other updates
  • Chrome app 0.2.5 - proper support for livereload, rewritten app generator, build task for packaging, new permissions code and more.

Other official generators including jQuery, Gruntfile, CommonJS, NodeJS and Mocha have also been updated.

Featured Community generators

StackOverflow answers

yo newyear

That's a wrap! If there are Yeoman resources you would like to suggest for the next issue, please feel free to suggest them to @yeoman on Twitter or +Yeoman on Plus and we’ll be sure to check em’ out. Happy Holidays and have a fantastic new year!

With special thanks to Stephen Sawchuk, Sindre Sorhus and Pascal Hartig for their review of this issue

The Yeoman Monthly Digest #1

By Addy Osmani at

Allo’ Allo’. Welcome to the first issue of the Yeoman monthly digest – a regular round-up of community articles, videos and talks to help you stay on top of what’s new with your favourite man-in-a-hat. We hope you find the articles, videos and updates below helpful!

Articles

Slides

Videos

Generator updates

If there are Yeoman resources you would like to suggest for the next issue, please feel free to suggest them to @yeoman on Twitter or +Yeoman on Plus and we’ll be sure to check em’ out.

The Landscape Of Front-end Development Automation (Slides)

By Addy Osmani at

Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year. What if however, you could automate a lot of this?

In the slides from my FOWA keynote, I walk through a landscape of tools to keep you productive on the front-end. Learn how to iterate faster, get real-time feedback, avoid bugs through tools and incorporate these into a functional developer workflow.

Some key points

  • Desktop tools for workflow automation can save time on simple projects.
  • Command-line automation tools are better for complex projects where you need more flexibility.
  • Use an editor that gives you real-time feedback during development to maximize productivity.
  • New authoring features in the Canary DevTools make editing in the browser pleasant
  • Augment your system workflow with productivity tools like Alfred
  • Use cross-device testing, network throttling and visual regression testing for a better mobile workflow.

Choose tools you’ll use

Front-end tooling has come a long way in the last few years. That said, it’s hard not to think that developing for the web today is awesome without thinking that it’s now more complex.

The key to staying effective is choosing tools you’ll actually use. Spend time analyzing your personal workflow and select those tools that will help you become more effective.

If you have any questions, comments or tooling suggestions you’d like to share, please feel free to let us know in the comments below!