
Google Web Starter Kit - lin0tune
https://developers.google.com/web/tools/starter-kit/
======
TheAceOfHearts
I'd advocate most people avoid this if their intention is to write an app. As
an alternative, I'd suggest evaluating create-react-app [0] or preact-cli [1]
if you're looking for something lighter. The lack of testing setup and module
support in this kit feels like a regression, although I'll concede that it
really depends on your use-case.

I've been using webpack [2] for a few years and wouldn't willingly go back to
this style of writing web apps. Once you learn how to use it, the world is
your oyster. You can write a loader or plugin to achieve pretty much any kind
of requirement that comes your way.

Consider replacing sass with cssnext [3], or even directly using postcss along
with the few plugins you need. As an example, you can use native css variables
during development and compile em away for production. Another great addition
is the :matches selector, which makes for much cleaner selectors in certain
cases. I never really found much value in most other sass features.

Instead of running imagemin as part of your build process, consider installing
imagemin-cli [4] and applying optimizations before checking in images. That
way it only has to done once, regardless of how many times someone checks-out
your repo.

Even if you enable ES2015 compilation with babel, you don't get any polyfills.
That means trying to use standard ES2015 globals like Map, Set, or Promise
will not work on older browsers. If you're gonna tell people they can add
ES2015 support by changing a single line, it would seem prudent to mention
this gotcha.

[0] [https://github.com/facebookincubator/create-react-
app](https://github.com/facebookincubator/create-react-app)

[1] [https://github.com/developit/preact-
cli](https://github.com/developit/preact-cli)

[2] [https://webpack.js.org](https://webpack.js.org)

[3] [http://cssnext.io](http://cssnext.io)

[4] [https://github.com/imagemin/imagemin-
cli](https://github.com/imagemin/imagemin-cli)

~~~
deanCommie
As someone who last web-dev'd in the day of ASP.NET MVC, GWT, jQuery, and
backbone.js, this post reads like one of those modern JS development satires
[0]

I know you meant well, and this is just the state of the world, but I can't
help but feel like a dinosaur just because I spent the last 5 years focusing
on server/cloud infrastructure.

Is there any hope for someone like me if I ever want to step back into it? I
ask sincerely. It seems like every best-practice framework's compelling
proposition these days is that it's "like XYZ, but fixes this obscure edge
case", where XYZ is something that only came out 2 years ago, so I never used
it, never mind understood properly.

[0] [https://hackernoon.com/how-it-feels-to-learn-javascript-
in-2...](https://hackernoon.com/how-it-feels-to-learn-javascript-
in-2016-d3a717dd577f)

~~~
pavlov
The way to step back into it is to ignore the library froth, pick something
that looks understandable from the principles you already know, and build
something useful.

Many people spend X hours a day obsessing about whether css-turd-polish.io is
better than Sassy.js v4. If you spend those hours working on something
productive, you're automatically ahead.

The framework churn is increasingly a perpetual motion machine for conference
talks. Don't go to conferences and you won't feel like you're missing
anything.

~~~
derefr
What if I want to _hire_ frontend devs for a green-field project—what tech-
stack experience do I look for?

~~~
zeta0134
Don't bother with specific tech stacks, because as mentioned, the churn rate
is really high. Instead, hire good _problem solvers_ who you can tell from
their interviews will be able to choose a framework that works well for your
new projects, or adapt to the framework you've chosen yourself for your
existing ones.

Understand that good programmers are kind of hard to find, but okay
programmers with experience in XYZ stack are not. Why? Because any reasonably
competent programmer can become familiar with a new framework or library in
about a week or two. Being able to separate the signal from the noise, and
architecture an application well within that framework? That's what you're
looking for. The tools themselves aren't that important.

~~~
inimino
Of course, to follow this advice you have to be able to identify problem-
solving ability, which is hard and why most hiring managers fall back on
buzzword bingo--to say nothing of HR departments.

------
tauntz
> Powered by Material Design Lite

That's a curious choice. MDL isn't being developed further and is being
replaced by _" Material Components for the web"_ [https://github.com/material-
components/material-components-w...](https://github.com/material-
components/material-components-web)

From [https://github.com/google/material-design-
lite](https://github.com/google/material-design-lite):

    
    
      Limited support
      Material Design Lite is now in limited support, with development having moved to the Material Components for the web repository.
      No further development is taking place in MDL by the core team, but we are happy to review PRs, fix critical bugs and push out new releases. No breaking changes will be accepted.

~~~
mattashii
> Last updated February 9, 2017.

[https://github.com/google/web-starter-kit](https://github.com/google/web-
starter-kit)

> Last release (v0.6.5) on December 13th

That choice is not that curious if you correct for project age.

~~~
StevePerkins
Seriously... this HTML/JavaScript template is FOUR MONTHS OLD, for God's sake!
Might as well be jQuery.

------
philtar
Looking at this page, and reading the comments here on HN, I'm glad I'm not a
web developer. What a mess.

~~~
degenerate
The 'mess' is like trying to buy a car. Once you get through all the annoying
sales pitches, conflicting opinions, dealer gotchas, options, and mental
monthly payments... you're finally in your new car and happily rolling along,
learning how it works and making it fit with your life. Then as time passes
you see all your friends and strangers driving X, you hear about Y, and you
really wish you could get your hands on Z, and all of a sudden your car feels
inadequate so you hate it and complain about it until you can get your new
car... or maybe you'll build your own car... hmm.

The mess of Web development is choosing what to use. It's pretty fun once you
get behind the wheel.

~~~
kuschku
The issue with web development is that there’s no good, or working solutions.
Every car that’s up for offer is missing something.

One of them can only be driven if you control every single circuit manually,
the next is missing an engine, and another has no windows, roof, doors, or
seats.

Each of the tools would probably be useful for some purpose in a way, but with
the entire toolbox of JS utils combined, it’s just a fractal of bad design.

On the other hand, you can look over into the JVM world, and, well it just
works. There’s one option for dependency management and handling of
compilation and preprocessing (gradle), you don’t have to handle any
complicated libraries or anything, you can very easily add annotation
processors or asset preprocessors as easily as adding a new dependency, and
basically everything works natively together.

I want to add preprocessing so my JVM 8 code works on JVM 6 or later? I simply
add the retrolambda preprocessor, and am done. One LOC.

Configuring Babel in the JS world, on the other hand, ends up with several
hundred lines of webpack or grunt or gulp configs, you end up dealing with
either merging all assets or using system js or whatever the latest fad is.

The JS world has recreated all the complexity of the JVM world, but worse.

~~~
CharlesW
> _The issue with web development is that there’s no good, or working
> solutions._

This complaint generally comes from the opposite direction—that the JS
ecosystem provides "too much choice", which can lead to FOMO or analysis
paralysis if you let it.

> _On the other hand, you can look over into the JVM world, and, well it just
> works. There’s one option for dependency management and handling of
> compilation and preprocessing (gradle)..._

Gradle, Maven, Buck, Pants, Bazel…

~~~
kuschku
> This complaint generally comes from the opposite direction—that the JS
> ecosystem provides "too much choice", which can lead to FOMO or analysis
> paralysis if you let it.

That’s exactly the issue. You have two hundred choices, but all are broken.
Every single choice is missing something. You could patch them together, and
get something that kinda works...

...or the developers of the two hundred solutions could work together on a
handful of solutions, and have a handful of working solutions.

> Gradle, Maven, Buck, Pants, Bazel…

Buck, Pants, and Bazel are basically unused for now, as none of them handle
dependencies properly, and they are almost exclusively used in large,
corporate codebases with vendored dependencies.

They are as relevant to this discussion as Perforce is to a discussion about
version control: Most startups or users will never have to deal with it.

~~~
ENGNR
It's on the way though. I'm amazed that writing javascript is starting to feel
(a bit) like scala, once you add transpiling from ES7, lambda syntax, optional
implicit typing, modules, a focus on immutability, etc. It's so much nicer
than what javascript used to be while keeping full backwards compatibility

And we get to keep the miracle that is robust sandboxing for dynamic code
download and execution, and a choice of browsers from vendors consistently
following one spec.

~~~
kuschku
> It's on the way though. I'm amazed that writing javascript is starting to
> feel (a bit) like scala, once you add transpiling from ES7, lambda syntax,
> optional implicit typing, modules, a focus on immutability, etc. It's so
> much nicer than what javascript used to be while keeping full backwards
> compatibility

Even if you use TypeScript, the type system is subpar, the tooling for static
analysis is mediocre, and you still need complicated transpilation steps.

As mentioned, I extremely hate the entire build and dependency management
infrastructure of the JS world.

~~~
ENGNR
I'm using flowtype and it's certainly no Java, but it's just enough (for now)
to build robust front-end SPAs

Would be interesting to transpile from more strongly typed languages also,
that's probably where the mainstream is heading

------
FabianBeiner
Am I missing something? This thing came out like three years ago. If this is
news: EVERYONE, CHECK OUT THIS AMAZING THING CALLED BOOTSTRAP!!1!

 _scnr_

~~~
mrisoli
I had the same question, repo has no commits since April 4 and only one
release dating back to December last year, and, as another comment pointed
out, it uses MDL which has been discontinued in favor of Material Components.

------
davedx
An opinionated Web Starter Kit with no libraries or frameworks included? What
is Google's opinion on which way to build a web application, roll your own?

~~~
sotojuan
> What is Google's opinion on which way to build a web application

Angular! Wait, Angular 2. No wait, Polymer. Sorry, how could I be so rude -
Progressive Web App with no framework.

~~~
davedx
Yeah. As usual Google's strategy is fragmented and erratic.

Angular2 looks solid, but I'm happy with React despite the warts in the
ecosystem.

~~~
sangnoir
> As usual Google's strategy is fragmented and erratic.

Tech trends are capricious - perhaps they are covering all the bases and self-
disrupting? There is a 2014 Ars Technica article titled "Google’s product
strategy: Make two of everything"[1].

[https://arstechnica.com/business/2014/10/googles-product-
str...](https://arstechnica.com/business/2014/10/googles-product-strategy-
make-two-of-everything/)

------
mattacular
Nobody new to web is going to understand this stuff and people who would
really understand this advice could already give it themselves. Not sure who
the target audience for this is supposed to be but why do we need yet-another-
web-boilerplate

------
andrewstuart
The right amount of configuration is zero.

create-react-app gets it.

This does not.

------
js4all
Hmm, interestingly I got the foobar challenge when I visited the site.

------
douchescript
Gulp, how quaint

~~~
xxxmaster
Indeed

------
ableton
I'm glad to see they are using gulp. I know webpack is the hot new technology,
but in my limited experience with webpack, gulp is easier to use and is more
intuitive. Webpack has a lot of loaders, but I feel like gulp gives more
flexibility out of the box. When I want to do something with gulp that I don't
know how to do, I feel like it is easier to implement with gulp, because gulp
seems to be a bit lower level. I noticed that they updated the docs for
webpack since I last visited, so maybe I will try again.

------
xg15
> _.gitignore: node_modules_

Wait, did I miss something? Wasn't it google who started the "vendor
everything" philosophy in the first place?

~~~
sidmkp96
So? What's wrong with this? Why would someone check-in all the 3rd party code,
when same can be described in package.json & downloaded again.

~~~
quickben
I started seeing the floating dependency approach at smaller places and
personally consider it a bad pattern.

You get everything you depend on, stuff it into a folder named third-party,
and check it in forever (or until security bugs, features you need, etc).
Include all and any licences, this is important.

When dealing with any software that's supposed to be our there for decades,
the last thing you want it to have unplanned work because of missing
libraries.

~~~
reimertz
I have seen this first hand at a acquisition. Missing licenses resulted in the
entire FE team working in finding missing licenses/find alternative module
with proper license or worst case scenario; implement our own solution. This
literally took 1 week. Shrink-wrap would have saved us a bunch of $$$.

~~~
Gigablah
You have to be careful about the type of licenses as well. Happened to me,
luckily it was a tiny library and there was an alternative available.

See anything with a "cute" license, such as WTFPL? Don't use it for work.

~~~
hedora
What's wrong with WTFPL?

I needed some wtfpl code for something, and asked a team of corporate lawyers
to evaluate it.

They deemed acceptable, and whitelisted it at one of the biggest software
companies around.

~~~
Gigablah
Another one of the biggest software companies around came to the opposite
conclusion :(

