A Polymer generator for Yeoman

[Addy Osmani]

I work on Yeoman, a workflow for improving developer speed when developing apps and am 

interested in creating a Generator (scaffold) for Polymer. Would this be useful to anyone?

I was thinking the workflow for the generator could be something like:

$ yo polymer

$ > What would you like to call your new component?

Carousel

$ > Will this be a Polymer element? Y/N

Y

$ > Would you like some extra boilerplate code included? Y/N

Y

We then automatically scaffold out your component, write an index.html file including it via HTML imports and pull in Polymer (and any related files)

using Bower. That's the start. If you want to go create another component using the same project (e.g a calendar), you can just run:

$ yo polymer:component calendar

$ > What would you like to call your new component?

etc.

and it'll just scaffold out the component and also wire it up to the index using HTML imports.

If this sounds interesting, I'd be happy to collaborate with Scott and Eric to define the optimal workflow and what code to scaffold out. I'm considering

writing something for this in June.

[Matt Bourne]

Hi Addy

Have you considered a web gui for yeoman that runs on localhost and allows performing the same actions.

This is kind of a philosophical question that I have been thinking a lot about and I don't want to derail the main thread here but I'm going to have a stab at explaining my issue anyway.

Web development is a broad term that stretches from simple static sites (not so much anymore), to complex single page apps.

I think the right motivation for experienced professionals is to make best practise easy for those entering at the bottom.

In many ways this is exactly what these build tools do and the stuff they enable around test coverage, sass and linting is awesome.

However does a young web developer who wants to build an amazing single page app need to feel comfortable around the command line - that feels regressive somehow.

Dreamweaver put web development in front of anyone and people may sneer but I think that's great. I'm concerned that the whole node.js obsession for developing is making the frontend the new backend.

In other words the complexity of managing servers and the need to have sys admin skills and command line fu has just transferred to a new location.

I would just love all this stuff to be encapsulated so people are shielded from the complexity and can enjoy playing with the lego. I want modern web app development to be easily accessible to the casual person.

Anyway sorry for going off on a tangent but I've just been thinking a lot about this recently and I was interested in your opinion.

[Addy Osmani]

Hey Matt,

That's actually a really good question and I absolutely don't mind us discussing it. I've been considering the idea of a GUI

for Yeoman running on localhost and one thing we might do as a first-step in this direction is improving our editor support.

We feel like the command-line isn't as scary as perceived but I completely understand the young developer feeling a little 

intimidated spending a lot of time there.

For example, developers spend a great deal of time in their text editor - we could make this type of tooling more integrated

with Sublime or whatever IDEs developers like using and that way they avoid the need to use even more tools beyond their

current window. Just using menus to trigger different tasks, scaffolding and build options can feel more accessible to some 

developers than using the command-line. 

We're going to spend more time on this problem in the coming months and we're hopeful that it'll start to slowly address some 

of the challenges you summarized.

[Eric Bidelman]

Thanks for writing this up Addy. I'm definitely up for collaborating with you. Shall we start a doc?

Thoughts inline....

On Tue, May 28, 2013 at 3:40 AM, Addy Osmani <addyo...@gmail.com> wrote:

I work on Yeoman, a workflow for improving developer speed when developing apps and am 

interested in creating a Generator (scaffold) for Polymer. Would this be useful to anyone?

I was thinking the workflow for the generator could be something like:

$ yo polymer

$ > What would you like to call your new component?

Carousel

Can we use "element" instead of "component"?

 

$ > Will this be a Polymer element? Y/N

Y

So you're considering a generator for regular joe custom elements as well?

We essentially need two paths then, one for Polymer elements and one for custom elements. The differences are not that great but this is something to think about

as Polymer's sugaring syntax evolves on top of the standards.

I don't know how  Yeoman's generator system works. Is there a way to inherit functionality from another generator?  Maybe it's best to create a Polymer generator for starters? 

 

$ > Would you like some extra boilerplate code included? Y/N

Y

We should flesh out what this is in a doc.

 

We then automatically scaffold out your component, write an index.html file including it via HTML imports and pull in Polymer (and any related files)

using Bower. That's the start. If you want to go create another component using the same project (e.g a calendar), you can just run:

$ yo polymer:component calendar

$ > What would you like to call your new component?

etc.

What about writing an element that uses other elements? I suspect this will

be the more common case for Yeoman (e.g. someone wants to reuse another component

in the app).

 

and it'll just scaffold out the component and also wire it up to the index using HTML imports.

If this sounds interesting, I'd be happy to collaborate with Scott and Eric to define the optimal workflow and what code to scaffold out. I'm considering

writing something for this in June.

--
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Matt Bourne]

Cheers Addy

Thanks for the response.

Integrated into sublime sounds awesome. Obviously a serious developer should give the time to get over their fear of the command line.
I do like the idea that people can start messing around with building modern web apps and using best practise with a gentle learning curve.
Of course this is not a new debate but I side with emancipating people to use technology through easy GUI and then using command line for added power.

Looking forward to seeing what you're doing in this space.

[Addy Osmani]

On Tuesday, 28 May 2013 18:09:24 UTC+1, Eric Bidelman wrote:

Thanks for writing this up Addy. I'm definitely up for collaborating with you. Shall we start a doc?

Yes! Let's do that. It would be fantastic.

 

Thoughts inline....

On Tue, May 28, 2013 at 3:40 AM, Addy Osmani <addyo...@gmail.com> wrote:

I work on Yeoman, a workflow for improving developer speed when developing apps and am 

interested in creating a Generator (scaffold) for Polymer. Would this be useful to anyone?

I was thinking the workflow for the generator could be something like:

$ yo polymer

$ > What would you like to call your new component?

Carousel

Can we use "element" instead of "component"?

Sure!

 

$ > Will this be a Polymer element? Y/N

Y

So you're considering a generator for regular joe custom elements as well?

We essentially need two paths then, one for Polymer elements and one for custom elements. The differences are not that great but this is something to think about

as Polymer's sugaring syntax evolves on top of the standards.

I was working through the getting started guide and as it distinguished between the two I thought it best to offer two paths. We can always just do one if you feel that would

be less confusing, but let's work through what makes sense in the doc. You know best :)

 

I don't know how  Yeoman's generator system works. Is there a way to inherit functionality from another generator?  Maybe it's best to create a Polymer generator for starters? 

You can either inherit functionality or just fork the generator and add additional functionality on top of it. I was thinking just creating a Polymer generator to start would be the simplest.

 

 

$ > Would you like some extra boilerplate code included? Y/N

Y

We should flesh out what this is in a doc.

 

We then automatically scaffold out your component, write an index.html file including it via HTML imports and pull in Polymer (and any related files)

using Bower. That's the start. If you want to go create another component using the same project (e.g a calendar), you can just run:

$ yo polymer:component calendar

$ > What would you like to call your new component?

etc.

What about writing an element that uses other elements? I suspect this will

be the more common case for Yeoman (e.g. someone wants to reuse another component

in the app).

We can certainly do that. It could be done as a prompt which detects if you have existing elements or simply asks if you want to use other elements too.

[Addy Osmani]

Sure thing! We can keep the group posted on progress. I imagine it'll be mid-June before we have anything substantial we can show off but it shouldn't

take too long :)

On Tuesday, 28 May 2013 19:36:04 UTC+1, devin....@appglu.com wrote:

This sounds great Addy.  I'd love to hear more as this project evolves.  

-Devin

[Christopher Sanders]

Hi guys,

I had been using the yeoman polymer scaffolding tool for polymer. However, I tried to use it today and it no longer works at all. I haven't changed anything. It just disappeared all of the sudden from my list and I tried to npm install it again and then run yo polymer and that failed. I was hoping to get started quickly without too much config and setup...

[Rob Dodson]

Is this the one you're talking about? https://www.npmjs.org/package/generator-polymer

Did you try npm install -g polymer?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---

You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/f2f3d3d3-5977-48ac-8731-da44fa8eae66%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Zeno Rocha]

Hey Christopher,

You should try generator-element.

It's a Yeoman generator that lets you scaffold an element using Polymer, X-Tag or VanillaJS.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAJj5OwD-GiEUfbw9ERbT7Pxk8Xhm0Y46fVgNfJ9%2Bp_mt6ACThA%40mail.gmail.com.

[Robin guo]

why the newest version generator don't support Bootstraps, the golbal of this version is not to build a app, just for building a custom element?

[Zeno Rocha]

Both generator-element and generator-polymer lets you scaffold an entire project.

One is based on polymer-boilerplate and the other on seed-element.

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2497c91d-66c3-4924-8e57-fc700504ebca%40googlegroups.com.

[Rob Dodson]

We reworked generator-polymer to use the seed-element as a starting point. That seems to have confused a lot of folks so we're going to go back and have it scaffold out an app, and the seed-element part will be a sub generator

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAAUBGa9nCdp-biA7ypgP4acmiw5y%2BDUef1-WE9706bAR-OF%2BfQ%40mail.gmail.com.

[Stefan Ritter]

I honestly thought it was a bit confusing too in the beginning, especially because the bower dependencies are placed into the parent directory.
That did trip me up in the beginning, consider coming from an Angular generator where the folder you run the generator in is your app. I ended up blogging about it too http://blog.stefanritter.com/post/91627263720/starting-a-polymer-project ;)

The way it's setup now you cannot use the generator to build an app as proposed here: http://www.polymer-project.org/docs/start/creatingelements.html

Instead it assumes each component sits in is's own repo, right?

Have you guys considered adding a third build option next to :app and :gh that would work for building an app structure with a separate components/ bower_components/ folder? It could come with vulcanize out of the box too, and build the custom elements for a components/ folder based on the seed-element but with dependencies placed in bower_components/  - I guess it would be like yo element:repo on steroids?

[Rob Dodson]

I've submitted a PR to make the generator more of an app scaffold. We'll review next week

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1dec59a6-1d02-449e-a8e0-64094c5e8bbf%40googlegroups.com.

[Stefan Ritter]

Awesome, already using the new generator, thanks Rob!