
Show HN: Mega Boilerplate - sahatyalkabov
http://megaboilerplate.com/
======
ef4
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.

~~~
Sacho
> "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.

~~~
ef4
> 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](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).

------
kristiandupont
Very nice! One small bit of UI feedback: your checkboxes look disabled and
checked when unchecked IMO.

~~~
sahatyalkabov
Thanks! You should see the updated checkbox if refresh the page.

------
fredwu
Awesome effort! I love the folder structure, very easy to follow.

A small feedback: I just generated a React-based stack with a few Auth options
- Email, Facebook, Google and Twitter.

The resulting `user.js` controller is 550 LoC.

It would be great if by default some of these logic are encapsulated in a
service layer rather than littered in the controller itself. :)

~~~
sahatyalkabov
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.

~~~
rhizome
You can call it "refactor-ready." ;)

------
dvcc
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?

~~~
projectramo
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.

~~~
underwater
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.

~~~
projectramo
I think of the download button as optional.

What I like about the site is the visualization.

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.

Basically, it helps you understand the taxonomy.

------
rosalinekarr
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.

~~~
sahatyalkabov
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.

~~~
dinosaurs
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!

------
pssdbt
Clicked and said "Ha, funny satire, boilerplates really ARE getting
ridiculous", but from comments this is for real. Sounds good.

------
noonespecial
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.

------
rblstr
I'm so impressed with your project's documentation (README), nicely done!

~~~
sahatyalkabov
Thank you! It is still work in progress. It will be improved upon in the next
several days.

------
neil_s
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.

------
dimxasnewfrozen
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 ;)

------
Jean-Philipe
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.

------
kaimaoi
Great project. Thanks for sharing! Any plans to add hapi as one of the
framework options?

~~~
sahatyalkabov
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.

~~~
matthijs_
Can understand that, but it does seem that hapi is gaining popularity, hope
you'll reconsider!

------
joeyspn
Good Job. Hope it gets traction... Looking forward to Angular2 and Meteor
additions.

Express tip: add swig template engine

Angular tip: use a feature per folder structure for better componentization
and "controller as" syntax (checkout John Papa's styleguide).

~~~
sahatyalkabov
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.

------
rufus42
At least the AngularJS + NodeJS boilerplate isn't using the latest suggested
style guidelines and folder structure. But great first start!

~~~
sahatyalkabov
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.

------
anonymous_shoe
Would love to see an option to use Relay and GraphQL

~~~
sahatyalkabov
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.

~~~
anonymous_shoe
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](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.

I'll track the issue and see how I can help.

------
wigster
nice - could do with a none option on the template engine

~~~
sahatyalkabov
It was originally there, but was later removed to keep things simple,
specifically with rendering the initial React layout.

------
sleepychu
Page isn't loading for me. Github is though.
[https://github.com/sahat/megaboilerplate](https://github.com/sahat/megaboilerplate)

~~~
sahatyalkabov
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.

------
AbraKdabra
Beautiful README.

------
hookshot
Just a heads up, using safari on OSX there are big blank boxes over the hero
text and I can't select radio boxes.

------
GnomeChomsky
Looks really helpful! How would I get started learning when combining this
with Cloud9?

------
gepesz
Good stuff!

------
soared
I really like the design of this site. Is it full custom bootstrap?

~~~
sahatyalkabov
I started with vanilla Bootstrap, but then it was iteration upon iteration of
small UI changes. Here is how it looked in December 2015:
[https://twitter.com/EvNowAndForever/status/67842879978085171...](https://twitter.com/EvNowAndForever/status/678428799780851712)

------
abustamam
Awesome! Will definitely use it for my next project!

------
romanovcode
Am I the only one who likes to build his own projects from scratch?

------
pheelicks
The layout is broken when viewed on mobile (iPhone 6). While this might seem
like a minor nitpick, first impressions count.

~~~
pc86
A. I am fairly certain you are being downvoted not for your overall comment
but for the last sentence, which is irrelevant and needlessly judgmental.

B. "iPhone 6" says nothing about what browser or iOS version you are using.

