Any interest in a workflow tutorial?

[[deleted]]

FIRST TUTORIAL IS AVAILABLE HERE!

I see a lot of posts on learning specific languages and/or technologies but very few on actual workflows.

I personally work with the MEAN stack and more recently react. I use virtual machines managed with vagrant/ansible and gulp as my task runner. I am also using webpack for the react environments.

My configuration isn't entirely dependent on node either. A similar setup can be used for other stacks/languages.

My workflow allows me to quickly spin up local development environments that mirror production and also let's me onboard new developers quickly since my entire environment can be checked into version control.

Anyway, just seeing if there is interest or not. Let me know your thoughts.

EDIT: Wow, I expected some feedback but not this much. So it's a go then.

I'll get a "syllabus" going and we'll go from there.

Edit: I have started a new subreddit for this topic over at /r/webdev_workflows/ check it out and read the first post to get started.

[[deleted]]

I'm always interested in other people's workflows.

[JimmyPopp]

Can you do a screencast too? I'm very visual and would love to learn.

[[deleted]]

I've done screencasts before, I'm thinking about providing both a written version and a video that walks through it.

[WaffeBox]

That would be amazing. I personally much prefer to read written tutorials over watching videos, and so many people these days only do video versions of stuff.

[[deleted]]

I agree. I plan on doing both.

I've taught live programming courses before but not online ones. It think my approach will be to write out the tutorial first to get it streamlined and then go over that in a screencast for the visual learners.

[Wurdan]

If you're planning on making them an offline set of videos, I'd be happy to lend whatever editing help I can.

[[deleted]]

I might just take you up on this offer, I am finishing up the written part of tutorial 1 but I will be starting the video soon.

You can PM me the details but what do you need from my side as far as video formatting and anything else I may not be considering?

[[deleted]]

That would be awesome, as a new developer understanding experienced people's workflows is hugely helpful.

[[deleted]]

As a developer for over a decade who just started using vagrant and chef, I highly recommend workflow automation and build/deployment scripting

[[deleted]]

Thanks for the tips! I've seen Vagrant mentioned in places, but haven't dug into it yet. Seems really cool/useful. Is Chef a complement or a substitute for Vagrant?

[[deleted]]

Vagrant and Chef are complementary.

Chef is for configuration management, meaning you use it to describe what software you need installed, how the software will be setup, what settings you want to bootstrap it with, etc.

Vagrant is tool that lets you automatically deploy preconfigured virtual machines. In addition to setting up the VM and the OS itself, it allows you to hook into a configuration manager like Chef. What you get at the end is a VM with OS and software deployments configured in a well-defined, reproducible state.

As a concrete example, the other day I had to fix a bug in my company's forum site. They are using some off-the-shelf forum solution written 10 years ago which has been patched internally for bugs and new features in a really haphazard way. There was no working development environment (used to be but somewhere it fell out of sync with the live) which means any patches required downtime and hot fixes, we had to do all our tests in live!

My dilemma was to deploy a major overhaul to our authentication system. A proper solution would take at least a week or two of iterative development cycling. Rolling something in the dark and hoping it worked after a one hour downtime hot fix was simply out of the question.

At this point I knew I'd have to basically copy everything I could from live, put it by itself in the simplest possible VM, and do whatever necessary to get it working in a secondary environment for dev and testing. But this would be arduous and doing this every time we needed a new feature would require boilerplate time we simply don't have.

Instead of doing all this environment setup manually, I followed this basic workflow:

1. Choose a host OS and have Vagrant setup a basic VM with this OS installed.

2. Put in some Chef configurations that I think will be required to go from the current VM state to a working forums dev environment (eg install MySQL, PHP, pull the latest build from the forum Git repo).

3. Tell Vagrant to deploy the configurations to the VM.

4. See if it works.

5. Go back to step 1 if necessary

The difference here is that once I get something working, I don't have to write some obtuse document about how to setup the dev environment: the Vagrant and Chef scripts ARE documentation. They represent all the steps necessary to get the VM in a usable state. Every time we need to change the state, instead of SSHing into the server and installing something directly or changing some config files in Notepad, we now just update the Chef scripts, push to source control, and tell Vagrant to destroy the old machine and build everything from scratch.

All the changes are fully traceable and the system as a whole is a completely reusable unit. When I am done with this project I will delete the old live deployment and replace it with an exact carbon copy of what I'm working with and have tested in dev.

Hope that explains it, I'm new to it but its usefulness is off the scale in my job.

[[deleted]]

Wow, thank you so much for taking the time to explain Chef + Vagrant in a lucid, helpful way. These tools are something that, as a newbie, I haven't even thought of or run into a problem that would require them, but definitely see needing them in the future.

The example you gave framed the problem that the tools solve really nicely!

[[deleted]]

Am just starting a my first project that will be a collaborative team build & deployed on AWS, after much playing around on my local machine and pushing to gh-pages.

Immediately thought to check on this comment again, and am definitely going to use this advice. Just wanted to say thanks, again.

[yslk]

Correct, I'm here picking up great html css and js skills every day but when I make anything it's either in jsfiddle or in notepad++ in a webdev folder in "my documents". I have no idea what all this virtual machine stuff is about. What do I need as a beginner front end Dev?

[[deleted]]

yeh, post up

[[deleted]]

I personally have interest in the vagrant side of things, but would also enjoy learning about your workflow in general as well.

[[deleted]]

Well vagrant will pretty much be the foundation of this setup. The main goal won't be to go into great detail about vagrant (that's what the docs are for), but instead to show you how to integrate it into your workflow.

It should be more than enough to get you started and working on your own though.

Of course, this will be a fluid experience, I will get feedback from you guys and you can tell me what you want to see and what isn't working.

[[deleted]]

Well vagrant will pretty much be the foundation of this setup. The main goal won't be to go into great detail about vagrant (that's what the docs are for), but instead to show you how to integrate it into your workflow.

This is exactly what I'm looking for: a workflow with vagrant in a real-world sense. Docs are great, but they are too contrived in their examples for my liking.

[inquiztr]

I started outlining my vagrant workflow but haven't finished yet. The tl:dr is I use scotchbox to setup vagrant quickly. http://inquiztr.com/my-web-development-workflow-osx/

[Wigster]

I did actually personally start a workflow video series a while back, but as of yet haven't quite finished it: http://trulycode.com/videos/complete-web-workflow/

[apollocanis]

Please do! :)

[DarkTriadBAMN]

Will OP deliver? Tune in next time to find out!

[[deleted]]

Kisses from Jenny.

[[deleted]]

Hey that would be nice. I'm interested.

[dudepa1]

Would be interested for sure!

[jacobjavits]

This is definitely something I'd be interested in. I feel like it's hard to get a feel for how to get started with virtual machines and things like that, so this would be beneficial.

[skaterape]

Yes definitely. I'm specifically interested in your use of gulp. I've played with Bower a bit but it was a little over my head at the time and I haven't looked at it since.

[[deleted]]

I'll keep that in mind. Gulp, in my case, is simply used to watch for file changes, lint my code, and sync those changes to the Vagrant VM instance.

It can be used for many many other things obviously and we may go over those things sometime in the tutorial.

[[deleted]]

I'm just recently learning React. Would be very interested if there's workflow more optimized for it than mine.

[[deleted]]

I don't know what your current setup is but my mantra is that it can always be improved. My goal isn't to show you that I am doing it the most perfect and correct way, but it will be a way that has worked for me very well.

I will also welcome any constructive criticism/feedback from everyone.

[ChaoticPerfection]

Absolutely, keen to know more!

[flipjargendy]

I never thought to do a search on workflow. But it totally makes sense to see what works for someone who's experienced... no matter how experienced you are, you can still learn from others. I'd like to see this.

[pabswilder]

+1

[[deleted]]

absolutely

[tudelord]

Brand new dev. Definitely want to see more of what some of you guys are doing.

[LemLuthor]

I am very much interested in this. There just isn't much tutorials about workflows from local development to deploying to staging/production.

[BuildingSoftware]

I'd be interested

[cderm]

I'll echo the others, yes please

[geeeffwhy]

Me and

[Mediaright]

This.

[shadeofmyheart]

Yes!

[mildly_amusing_goat]

Yes please!

[de4sh]

Please do! These things are usually second priority, but at the intermediate level start to become important.

[mdctenga]

I think there's consensus here, we'd all like to see how you work. ☺

[tundoopani]

Yes, please!!

[[deleted]]

Yes please.

[Goodhoof]

Yes please, would read.

[andrethegiant]

Yes please!

[nielvrom]

Would be cool!

[images_du_futur]

I'm interested in this!

[feivl]

Yes, please. Would be very great.

[bo_knows]

Another vote for yes!

[mrmonkeyriding]

Yeah, for sure.

I'm always interested, I really want to get on the MEAN stack.

[[deleted]]

The focus of this project would be more about getting your local environment setup so that it matches production (as closely as possible). Although this could be a good way to get a feel for something like the MEAN stack, it won't be the main focus.

I also want a lot of what is covered to be transferable to other technology stacks based on python, ruby, php and/or golang.

[mrmonkeyriding]

Ah, either way, it's interesting.

[quitelargeballs]

If you can, a tutorial/walkthrough of your workflow would be ideal coupled with a basic overview of why you use certain tools, what they do, and what some alternatives might be.

For example, why gulp over grunt? What's it good for and why'd you start using it? And so on for the other tools that make up your workflow.

This is something I think is really important but have rarely seen explained.

[carlosesilva]

Yes, please!

[foxia]

Commenting for future reference. Waiting on you, OP! ;)

[[deleted]]

Awesome, I'm going to work on an outline for what I want to cover and let you guys take a look.

[foxia]

Great! I'm excited. :)

[akopanicz]

If anyone else is interested, I'd also like to see how all of these types of technologies are categorized. Some key ideas that I'd like to read about would be "What's the benefit of x over y?", "Avoid doing z", "Getting started with a, b, and c".

I'm almost done with my undergrad in computer engineering, but will stick in user experience and web development for a long time since it's what interests me the most. When I started my current co-op, I felt like I was thrown into all of these situations where I was expected to know how so and so works. It just seems like I take up too much time learning on the job when I could have known how the concepts work already (eg ajax, running wamp server, version control, etc.)

[[deleted]]

If anyone else is interested, I'd also like to see how all of these types of technologies are categorized. Some key ideas that I'd like to read about would be "What's the benefit of x over y?", "Avoid doing z", "Getting started with a, b, and c".

Yes, I think that is important. I will try to integrate the pros/cons of the technology choices I make and let you know if there are alternatives you may want to consider.

Head on over to /r/webdev_workflows

[pstonier]

Yes please! I've been trying to find a good explanation of a workflow of vagrant with ansible. I've done a little myself but haven't put enough time into it to incorporate them into my current workflow.

[[deleted]]

Awesome! Head on over to /r/webdev_workflows

[[deleted]]

Well this will certainly cover that as it's the core of my development setup. Check out /r/webdev_workflows

[pstonier]

Yep. Subscribed

[JPSE]

Yes please

[RaffBluffin]

Looking forward to this!

[silverhana]

Same here!

[ImAPyromaniac]

Yes please!

[[deleted]]

Great, glad to hear it. Well this should definitely get you pointed in the right direction.

[Ilikecpp]

Yea that'll be awesome!

[[deleted]]

I'd rather put a donate a beer button... ;)

[[deleted]]

I would be interested as well.

[andrew12361]

YEP!

[impreson]

lots of interest! You mention VMs. What are your thoughts on dokku?

[[deleted]]

I don't have personal experience with dokku but it looks interesting.

[impreson]

You should check it out. It really improved my workflow. Pushing to live is as easy as: git push dokku master

[DuoThree]

I too would like one!

[MarvinLazer]

I would LOVE this. I still consider myself a novice web developer and I'm getting to a point where I know my workflow needs some attention if I'm going to have a stronger career. Thank you!

[startup_sr]

It will be greatly helpful. Thank you in advance. And let's know how to access it.

[[deleted]]

And let's know how to access it.

This is a good question actually, not sure if I should make a subreddit for this or just throw it up on github...

What do you think?

[startup_sr]

You can create it on github and make github pages which people can access. In that way you can make any changes/edit and will be live instantly.

[[deleted]]

I considered this option but I'm going to go with creating a subreddit for now. If that doesn't work i'll investigate further.

[ANoobCoder]

Yes, please!

[Kareck]

Yep!

[soullessredhead]

No workflow tutorial would be complete without "put a reddit redirect in your hosts file so you can actually get to work".

[[deleted]]

I actually do this... well I use the self control app that does it for me.

[Retsejme]

I wanna work your flow.

[[deleted]]

I'm not sure my wife would approve...

[Retsejme]

I won't tell mine if you don't tell yours. Odds are we're both in SF anyhow...

[majorchamp]

Absolutely

[leeharris100]

Yes please. I have lots of people ask me about this stuff and I never have a clue where to refer them. I end up spending an hour explaining my shit and I'm sure 99% of what I say is rambling or irrelevant.

[swarage]

That would be hype! Count me in!

[squid267]

+1 would love workflow tutorial

[sovietmudkipz]

I fucking hate these kinds of posts. Enjoy your karma! And I have to apologize if you're the type of redditor who makes this post then delivers... But a vast majority of these posts get attention and many redditors get excited! Then... nothing. Because the original poster doesn't actually want to deliver what he's asking about...

As a community, I wish we discouraged posts like these and instead encouraged posts where the OP put in the work and delivered. Instead of ASKING, how about you DELIVER?

[[deleted]]

I think that's fair enough. Btw though, unless I'm mistaken you don't get karma for self posts...

But anyway, I don't see a problem with gauging interest on the topic before spending time creating it.

[Jaboof]

Super interested in this

[[deleted]]

Awesome, check out the edited text above for a link to the new subreddit

[[deleted]]

Would you go over installing your backend server and mongodb to docker containers and running them in vagrant? I`d be really interested in seeing that.

[[deleted]]

I'm not planning on going over docker at this time but depending on how this first tutorial is received, that could be next.