Production workflow

[sergelerner]

Hi, i know i tried this before with issue number 82, which was closed, but i struggle to understand the purpose of pattern lab when it come to creating real applications. maybe you can shed some light on this for me. where i work we got exited about this project and decided to use it as a static site generator which was really helpful. now we are at a point where we want to deploy our apps for production. and the only way i see this possible right now is by manually editing the public folder files, copying and pasting and so on.. I can manage that by myself alright, but this way it makes the whole workflow a bit tedious especially if one needs to go back and make changes inside of pattern lab and then go through the whole manual deployment again without some automation tools. This got me thinking maybe we misunderstood the purpose of pattern lab from the first place. I'd appreciate to hear more from you regarding this issue. thanks!

[dmolsen]

@sergelerner -

I think this is a problem not necessarily with misunderstanding the purpose of Pattern Lab but sort of understanding where development focus tends to be. This is a really broad project and it attempts to cover, at the very least, the lifecycle of a site's development process and client review of said development. There hasn't been much focus on either how to handle a move to production nor the management of handling changes to a production site. I chalk this up to two issues:

1. For my team we're handing off assets or moving to an entirely different system and we haven't worried about keeping the PL edition up-to-date. We just haven't had that need.
2. I've done a fair bit of hand waving regarding "upload public/ and you're good." I haven't seen nor heard from many who are doing anything terribly complex. My stuff is just mark-up, simple JS, and images.

If you can describe a good use-case or what your ideal set-up would be that'd be great. Anything towards that end of the project life-cycle would be a long-time coming as I have limited time. Happy to take or work through a patch to add it in though. I could see a command line addition to S/FTP public/ auto-magically to a remote host. I'm not sure what else you'd need for "manually editing" files. Maybe it's a matter of building off of #96 for production vs development _data.json files that might have production vs development hosts and paths Mustache variables.

Thanks much for re-opening and starting the conversation again.

[krulik]

@dmolsen Thanks for picking up the opportunity to discuss this.

I'm directing @sergelerner 's team and was the one who got excited about PL in the first place enough to jump on the wagon for a production project without any prior experience. I also believe that we're (Netcraft) among the early adopters of PL and Atomic Design in Israel, and as a prominent Front-End force in our country are in an influential position to move it forward. Thus its very important for us to fully understand the intended and future use-case(s) of PL.

@sergelerner Can best describe the meaning from a technical point-of-view, but simply put - what we're looking for is a way to use PL not only as the "kitchen-sink" for markup and style, but also as the up-to-date component structure for production web applications/sites. Our workflow is such that upon making it to Pages context we're adding Business Logic as well, incl. navigation, state and real data (using AngularJS). We need a way to deploy/maintain this actual application/site without losing the connection to the "kitchen-sink", i.e. if later on I change a button's color - it should change all the way through the atoms->pages chain to production.

Now that I'm writing this I understand that perhaps this is what has been missing for us - the step after "Pages", a "thing/place" to tie those pages together.

Also I have a technical question - how precisely did you hand off those assets to the other team? It can help us, thanks.

[igalst]

Hello everyone. Here are my 2 cents about taking PatternLab to production projects.

In the last couple of week I've been leading another team, in parellel to @krulik and @sergelerner, that work on a PatternLab based production project as well.

This this opportunity, I would like to thank you for this great tool. We're excited to use it :) While working with it, we came up with a few challenges and issues we've struggled with. Maybe it is off-topic a little, but maybe this would be helpful anyway..

1. Ability to define and extend the build process. After using tools like Grunt and Middleman, you do get used to modifying the process any way you find fit. Also, in this regard, I would be happy to see an ability to use prettier urls, than the currently generated ones in the public folder. In addition, there is some PL specific code in the public html files that is not needed for production that should be removed.
2. We were using HAML a lot in the last couple of years. Therefore, Mustache seems to be way too limited in regard to generating page elements. You can create some kind of repeater and even a few conditions, but you're still very much limited. For instance, if you need to create a dynamic menu (generated in compile time from a JSON), but still want to mark a specific element in the menu as "current", comparing it to the current page's name (using a special variable), it would be impossible to implement. It is one pretty basic use case.
3. When working together with client MVC/MVVM framework, you would find yourself in a need to load in run time the same JSON file that was used to generate the markup in compile time. We found it to be tricky to implement with PT mostly because JSONs' paths are hard to retrieve.
4. One thing, that maybe has some connection with previous points, is that currently PL doesn't play nice with 3rd party tools and helpers. Meaning that, if today I would like to customise that way PL does something, it would be impossible to do so. I cannot write helpers that pre-process my code at compile time (for instance, simply replacing one string by another), and I cannot gem install or npm install such tool. The only way for me to achieve such goal, would be modifying the PHP core.

[dmolsen]

@igalst -

Wow, nice wish list :) In looking at the discussion it highlights that we, or I really, haven't thought about how stuff can live outside of the Pattern Lab wrapper. This has been a designer's tool. That influences some of the decisions made so far and decisions we might make down the road. Please understand that this is an unpaid side gig for me. I'm open to suggestions but other things influence how I prioritize and tackle things. Brad also weighs in on what he sees as following in his original version for the product.

With that here's a rather quick response because I'm not sure I'll be able to get back here in for a few days:

1. This may be coming. I'm looking into how I can use elements from Symfony in PL to make my and other people's lives easier. I'll be honest, I don't have any experience with it but there were some modules that intrigued me for allowing hooks into the build process. On the pretty URL front… give me an example of how you'd modify that. I'm open to suggestions. This falls out of the "I don't care about the URLs because it's not going to be viewed outside of the iFrame wrapper."
2. The use of Mustache is on purpose and I'll have to talk to Brad about moving away from it. If he has heard from people that they need the flexibility of logic then it's cool. The lack of logic is one of the benefits to me when focusing on the original audience, designers. It keeps things simple. We also fully expected others to implement their own libraries and Mustache seemed to be a good cross-language base.
3. So you need the JSON files to move into public along with the rendered templates? Or you need them combined in some way? I'd need a more specific example to completely get what would work. Not saying it'll be done but I see where you're coming from. I need more info to decide what it'd take.
4. Again, with the symphony tools maybe we can come up with something. I'm just not sure it'll ever be a robust environment. I've heard of people mixing grunt and PL as it stands now. Maybe that's a better mix than waiting on PL to become more robust?

I'm happy to discuss the issues. Just understand I'm limited in my ability to execute on everything. Either through time or a difference of vision for the product. We'd like to make this as useful as we can. It might just not end up matching needs.

[sergelerner]

For a side gig this is a well appreciate project indeed i must say, i dont even grasp how one finds time for all of this - but there you are : ) So there's a lesson here for all of us...

Now regarding my prior issue, with all the above said, my solution is a simple one - a command line to generate a dist folder, similar to the public one, just without the pattern lab files and a few changes:

1. all reference for PL inside the html files should be removed.
2. only the page patterns should be in it on the root of this folder.
3. an index.html could be the 00-page for example.
4. paths to css, js and images needs a small rewrite.

I might be missing out some things, but that is pretty much what i did manually.

Now if you have such a folder you can move on and add grunt or whatever to do the rest of the automation on it such as minification...

In my project I end up creating a single page application, so i have only one page pattern, with lots of organisms being displayed at the right time/place by AngularJs. So i never dealt with linking between pages. Which might be another trick here.

On a different note, you mentioned previously that it is a designers tool, i think in the US you do a better job drawing the line between web designers and web developers, here for instance (here being Israel) we fall from such distinction. Most of our designers hardly write any html/css, they kinda got stuck in Photoshop (where they do an amazing job), something we're trying to change those days. So the developers job turns out as a long run from markup up to production. Maybe this is why we find ourselves always trying to see the whole picture.

[dmolsen]

@sergelerner -

Ok, I can get behind a dist/ or export/ dir. We already had an open issue for this (#67) but it's good to be reminded of it and now it has a reference from this issue so we know it's definitely a desired feature.

In the near-term I'm going to be working on those issues marked with the 0.7.1 tag as well as the open bugs. Longer-term I'll wrap this the dist//export/ folder issue into 0.8.0. I would guess that will be March or so. That's probably not fast enough for you guys but at least you can be assured I'll try to tackle that particular problem.

Because an issue already exists for at least this idea I'm going to close this particular issue. Thanks again to you and your colleagues for the feedback. It's really good to hear other perspectives :)

[sergelerner]

@dmolsen Thanks lots well appreciated !

[krulik]

@dmolsen I'm very excited about this and am very grateful for your work guys.

Indeed it was a very interesting discussion about different workflows, in particular the references to previously made comments by @bradfrost in (#67 and #40) had shed some light that this is actually an approach issue.

[nkmaurya]

@dmolsen

HI, please suggest me how to work with pattern lab and angular js . Actually I'm building a websites/product in angular that consumes dynamic data through web Apis. In this i want to use template/pattern generated by Pattern lab but i have no idea how to do this. Also I want to use angular routing instead of pattern lab routing. Please provide step by step guide to integrate angular with pattern lab. I have downloaded and configure this sample project https://github.com/bmuenzenmeyer/patternlab-node-angular-example, but this doesn't have much to solve my problem.

Is there any script command to export all templates as html ie. home.html, product-from.html and also is this right way to work with angular & PL?

Thanks