I'm going to go against the JS ecosystem grain and say that boilerplates are a total anti-pattern. And not because you should be doing this stuff by hand either, which is probably the second most popular answer.
"Boilerplate" implies copying a bunch of code into your project that should be library code but isn't because it's too poorly designed to have an API cleaner than "just fork it, YOLO". It's dramatically harder to update than something with well-designed API boundaries.
Your web app really isn't a unique snowflake. Shared, standardized toolchains are harder to build but once you do they're a dramatically better long-term investment.
In Javascript it's really just ember-cli that operates this way, which started in the Ember community and has now also been adopted by Angular.
> "Boilerplate" implies copying a bunch of code into your project that should be library code but isn't because it's too poorly designed to have an API cleaner than "just fork it, YOLO". It's dramatically harder to update than something with well-designed API boundaries.
In most of these cases, "boilerplate" implies a choice of frameworks, libraries, build and test tools, with a minimal or recommended configuration, all tested for interoperability. The actual code advancing your application is minimal.
In the case of megaboilerplate, it appears to be a mix of configuration files plus a mini hello world built on top of the technologies. The mini hello world seems to be mostly a demo of how the chosen technologies can interoperate, not really something that "should be library code".
> Shared, standardized toolchains are harder to build but once you do they're a dramatically better long-term investment.
Possibly, but I think you underestimate the effort required to create and distribute a toolchain that would become shared and standardized. In effect, a specific team might choose a particular boilerplate, tweak it to its needs, and the tools and libraries within that boilerplate become their "standardized" toolchain.
> Possibly, but I think you underestimate the effort required to create and distribute a toolchain that would become shared and standardized.
Not really, because we're already doing it. It's definitely hard, but it's also definitely possible.
ember-cli has unlocked major community-wide sharing that is otherwise not possible. Like a healthy addon ecosystem (https://emberobserver.com) where things are far more likely to _just work_.
And this has kicked off a virtuous cycle. Big engineering organizations with long-term vision are joining in.
> become their "standardized" toolchain.
That's exactly the problem: once you create _your own_ standardized toolchain, you are the only one who can document it, teach it, ensure other things are compatible with it, and integrate upstream upgrades. When a community works together to decide on a much broader set of standardization, that burden is shared and everybody goes faster. And developer knowledge is much more portable.
Nobody making iOS apps thinks it's smart or necessary to write their own XCode. People writing ambitious web apps shouldn't either. (And I say that as someone who finds XCode annoying -- it's _still_ better than trying to build it yourself from scratch for each app).
> "Boilerplate" implies copying a bunch of code into your project that should be library code but isn't because it's too poorly designed to have an API cleaner than "just fork it, YOLO".
That's a bit too simplistic. Even if the majority of the boilerplate code live in libraries, you don't need all the libraries for all your cases. Then your options would be either something like this or adding unnecessary dependencies for the sake of reducing boilerplate. To me this is the lesser evil between those two options.
As always, there are trade-offs between the two approaches. Libraries may be a great approach, but they lock you into the implementation they chose, and the individual components they chose.
With many boilerplate/scaffolding solutions (yeoman, for example), you're given some quick templated code and left to implement logic yourself. You're free to swap out implementations anytime you want, without having to fork the library, or force library developers to maintain overbearingly abstract interfaces so that dependents are free to swap in some other component.
Neither is a perfect approach. The best solution will vary with the flexibility you need for a given system. Anecdotally, the best projects I've worked on were built using a combination of libraries, frameworks, and scaffolding tools. I attribute this to the fact that the tools we used were (at least among) the best at doing one specific thing (render the app, scaffold, build, serve, etc.) and worked well together by not trying to do all things equally well.
Agreed. I get so sad when I see this happen in the JS ecosystem (being used to python), but it's pretty easy to not fall into that trap. Use bower on the browser side, and npm on the server side. At that point, the only fight you have left is finding the stack of components that will play nicely together, which is the labor of architecture anyways.
Thanks for the feedback! Agreed, it makes sense to refactor those routes into its own Auth controller. I will open a GitHub issue. However, some of the code is intentionally written that way to keep things stupid simple and easy to understand for developers of all skill levels, which you would normally encapsulate into a service in your own app.
I hate to sound negative, but what does it offer over yeoman and the individual generators out there? If I use a Mega Boilerplate setup, I lose scaffolding post-setup stage, so what do I gain?
I agree that it serves almost the same purpose, but for a beginner, seeing all the layers, what they do, and choosing them piecemeal is a great way to learn quickly before graduating to the yeoman ecosystem.
Yep - I get confused between Grunt, Gulp, Yeoman, Bower, Node, React, Angular, jQuery, TypeScript. How do these things fit together? Why would I choose one over another?
As a predominantly backend developer, If I just want to have a 2016-style workflow for the frontend part of my site, it's really hard!
I used React Starter Kit for a project and greatly regretted it. In the end I would have been better off taking the time to learn how the parts fit together myself.
With the boilerplate I was locked into the questionable decisions and brittle implementation of the original author. Changing anything usually broke my app and because I had taken the starter kit shortcut I didn't have the understanding of how to fix it.
So, for instance, you know that Express is an alternative to Meteor, not a complement. And that Jade/Handlebars work with Express and are alternatives to each other.
Just having that for all the combination of names is valuable.
There are a decent amount of yeoman generators that allow selections between the different layers. Plus I feel like beginners (certainly for me at least) generally struggle with this heavy boilerplate anyway.
It's more intuitive for beginners and if more stacks(Django/Laravel etc) are added, this would be a good way to select stacks and generate boilerplate.
For me(I maintain a purely platonic relationship with JS) it offers an easy choice. An example: I don't have to choose MongoDB over Postgres just because the Yeoman generator that actually has all the items I want, decided to go with NoSQL.
Wow, as a long time RoR dev set in my ways, you may have finally given me the tool to overcome my laziness and check out this new fangled "server-side javascript" thing.
The server-side JavaScript hype is real and it is awesome! React option comes with Redux, React Router and with server-side rendering enabled. I have also gone through all the obstacles of setting up authentication with server-side rendering. If the code doesn't make sense, I will try to create a small diagram of the user auth flow.
I wouldn't mind seeing that diagram. Just downloaded the React option and I'll definitely be going through the code as a learning process; server-side rendering still doesn't really click with me. Thanks!
That's really cool. Even if you don't find the project itself all that useful, bounce on over to the github and have a look. This is a good example of how to put a project together and share it with the world. Kudos.
This is so awesome, great way to understand the current options and common choices in the ecosystem at a glance. I've been choosing Meteor recently precisely to avoid having to write a bunch of boilerplate Gulp/Grunt code to piece all the tools together and run the code and asset files through the pipeline.
Wow! As someone who struggles to configure all of these dependencies, I love this. I also have difficulty learning new stacks by following the hello world/todo examples in the documentation so having a real boilerplate app built helps tremendously. Maybe I'll finally try and learn React ;)
It's not exactly how I would do it (of course!), but close enough for me to try it on my next project! I love the choice of modules on the server side. Seems like a lot of thinking went into this boilerplate. I'm curious how it will work out for me in practice.
I had originally started working on Hapi generator (there are still some leftover files in the Git repo), but decided against it after running a quick Node.js Framework survey among my Twitter followers. Given the amount of effort it would take to add a second Node.js framework and the low demand for it, it was simply not worth it.
Looking forward to Angular 2 myself! I have actually started with swig template engine until seeing NO LONGER MAINTAINED notice on their GitHub page. Many have recommended to use Mozilla's Nunjucks instead.
Last time I have used AngularJS was in 2014, so that's why the project structure looks a bit dated. I am open to suggestions on how to improve it, or even simplify it further.
I will consider adding it in the near future. It was originally on the roadmap, but don't have any experience with either Relay or GraphQL. In any case, I will open an issue on GitHub for this and do some research later.
That would be awesome! I've been working with Relay and GraphQL since they were released. Having messed with most of the boilerplates in that ecosystem, this one is the best IMO: https://github.com/fortruce/relay-skeleton
But I would love to see it with a testing framework, a css pre-processor and a production build script.
Requests per second were going through the roof during initial announcement due to a lot of images, css, and javascript being served by the main Node.js app. Assets are now served from CDN, albeit hardcoded, but that I can fix later.
I don't see any layout rendering issues on iPhone 6s Plus/iOS 9.3.2/Safari Mobile. If you could open a GitHub issue and include a screenshot, that would be great.
"Boilerplate" implies copying a bunch of code into your project that should be library code but isn't because it's too poorly designed to have an API cleaner than "just fork it, YOLO". It's dramatically harder to update than something with well-designed API boundaries.
Your web app really isn't a unique snowflake. Shared, standardized toolchains are harder to build but once you do they're a dramatically better long-term investment.
In Javascript it's really just ember-cli that operates this way, which started in the Ember community and has now also been adopted by Angular.