
Ask HN: Modern day web development for someone who last did it 15 years ago - oldtimer1010
TL;DR -&gt; Want to build a relatively simple responsive website like say Hacker News with Authn support (custom and Google OAuth). What is a minimal set of JS&#x2F;CSS frameworks, templating engine, deployment tools, IDE I need?<p>Details:<p>I am a professional Software Engineer (Google) and well versed in &quot;Backend&quot; Infra stuff and creating APIs. But when it comes to building anything with GUI, I am completely lost in the maze of modern day web dev! Last time I built a website was a bunch of mostly static pages (all hand generated - no templates either) with some JS plugins for a top bar nav. Life was simple with a simple SFTP to the webserver (Geocities or similar!) for hosting.<p>Of course over time, web development has become much more complex (primarily because Websites do much more now a days than they used to), and I see a plethora of frameworks, transpiled languages, etc such as: Gulp, Typescript, JSX, Dart, Angular, React, Bootstrap, Babel, Wordpress, Drupal, Flutter, NPM, Web assembly, Vue.js, Minification of code before deploying, jQuery, and a gazillions others. It&#x27;s hard to build a mental model when things are happening at 4 level of abstractions away, e.g., Typescript translated to some JS framework code which then uses jQuery underneath and which finally calls something I can actually relate to: document.getElementById()! Also missing from my skillset is debugging Websites using tools such as Chrome dev console.<p>Has someone in similar situation tried to learn modern day web-dev toolchain? Any suggestions, tutorials, etc are well appreciated! For backend server side, I am comfortable with Python (so prefer Flask or Django), but Node.js is also fine (used it a bit couple of years ago). Suggestions for an IDE&#x2F;plugins are also welcome (I have been using Vim for most of my life).
======
rajeshp1986
I can understand your frustration as I am currently in the same spot. I saw
this post[0] in HN yesterday which is great introduction to the modern web
development. I hope the author writes a 2nd part to the blog post.

[0] - [https://www.vrk.dev/2019/07/11/why-is-modern-web-
development...](https://www.vrk.dev/2019/07/11/why-is-modern-web-development-
so-complicated-a-long-yet-hasty-explanation-part-1/)

~~~
reviel
thanks for this, enjoyed the post

------
codingdave
> What is a minimal set of JS/CSS frameworks, templating engine, deployment
> tools, IDE I need?

None. You don't need any of that to build a modern web site. The web is still,
at its core, HTTP requests that send text to a browser, that in turn renders
what it receives. Even though web site do more these days, they still run
JavaScript to do it, which you can still code in a basic text editor.

The better question is what problem do each of the modern tools solve, and
which of those problems matter to your goals? Odds are, yes, you'll want some.
And many people will tell you their favorite combo of tools and declare it to
be the answer.

My recommendation is find your own answer, by first sticking with what you
know, and adding one piece at a time. If you know python, stick with that.
Django has its own toolkit, and it works. Whether or not you like it is up to
you. But it is a starting point. You can always start from there, add on
modern CSS. Bootstrap is at least decent to let you work with some recent CSS
frameworks to see how they operate, but there are certainly other choices as
well. React and Vue are popular, I believe for good reason, so I'd at least
try a few tutorials to see how they strike you. Over the course of trying
those, you'll pick up webpack, babel, and npm, and get to understand the
ecosystem.

If you play with one tech on the side each week, in a couple months you'll
better be able to answer those underlying questions of how each solution
solved problems in web development. And you'll be able to make your own
choices of which ones you want to stick with.

------
dyeje
For a site like HN you don't need a JavaScript framework. Just pick a popular
framework like Rails, Django, Laravel, Phoenix, etc (basically just pick the
popular framework for your language of choice) and do server side templates.
Most if not all of these can be converted easily into a backend API for a
JavaScript framework frontend later anyways.

------
mcdramamean
Start with Bootstrap. Build as many sites as you can just using Bootstrap and
then study what the classes are actually doing. Then replicate the classes and
make changes to them. Bootstrap has enough that if you go through each thing
it has, you will have a decent appreciation for the look and how the
CSS/HTML/JS fits together to make a site. Then start using jQuery heavily.
Find jQuery modules and use them. Play with the options. Then start playing
with the code. Those 2 things will be good enough to then move on to something
more complicated; which ultimately is just abstracting these basics and
attempt to make them easier. But you have to already know what is happening if
you don't want to get confused as to why you are using the tool and what your
other options are besides this tool.

------
hackermailman
Read everything you can about CSS Grid. Use MDN or caniuse.com to see if it
will work with what browser. Read about semantic HTML and things you can do
with the latest spec/standard
[https://www.256kilobytes.com/content/show/4399/get-these-
dep...](https://www.256kilobytes.com/content/show/4399/get-these-dependencies-
off-my-lawn-5-tasks-you-didnt-know-could-be-done-with-pure-html-and-css)

Stay with Vim and just manipulate the DOM
[https://youtu.be/h_e5pPKI0K4](https://youtu.be/h_e5pPKI0K4)

------
Nextgrid
You can remain a backend developer and still have a good career & money,
especially considering mobile apps need APIs which are purely a backend thing.

But if you want to make a clone of HN, you don't need much frontend
experience. Any backend framework and basic HTML & CSS skill is all you need.
Don't waste your time with client-side Javascript frameworks and the (IMO
insane) toolchains for such a simple project.

Speaking of IDEs, JetBrains' products are good. If you use multiple languages
I suggest you buy the "Ultimate" edition which is IntelliJ IDEA which can
support all the other languages with (official) plugins as opposed to
language-specific versions like PyCharm which are cheaper but only focus on
one language.

------
lastofus
I was in the same boat as you around 5 years ago, when I finally bit the
bullet and started down the "modern" path.

My recommendation is to just start on your project, and see how far you can
get using your 15 year old skills. Once you hit a road block to something you
want to accomplish, start looking at some "modern" solutions to the problem,
and pick one up that feels best for you.

You may find you need almost none of the tools listed above, and the ones you
do pickup, you will understand why they exist in the first place.

That said, I recommend trying out a JetBrains IDE, as it will give you lots of
sane defaults out of the box, including auto-completion which is kinda great
for dynamically typed languages. VIM plugins are available as well.

------
buboard
Then there is the issue of whether you want to invest time learning
technologies that are still unstable. The stuff you learned 15 years ago is
probably still working (and you can make a website with that too). Will modern
javascript be around in 15 years?

------
dpezely
Some differences between then and now are also different idioms such as CSS
naming conventions.

See GetBEM.com - for Block, Element, Modifier naming.

For instance, current conventions are to put a class name on far more HTML
elements than years earlier, and avoid using hierarchical specifiers. (Yes, I
know, at first it may seem to defeat the _cascading_ within "CSS" without the
hierarchy, but it's more nuanced than first glance.) It's especially useful
when hiring front-end/UI developers to maintain the project after your initial
build, as many will have learned BEM at various coding bootcamps.

------
muzani
My suggestion is always just use what you need.

Responsive website? Use Bootstrap or Foundation.

Want to build for mobile? React Native, Ionic, or Cordova. These will also
take you down the React or Angular path.

Just need minimal API access? Don't go further than jQuery.

Need something heavier? E.g. CRUD dashboards, listing sites, social media, you
can pick up a web framework.

For IDEs, Sublime Text is almost a direct step up from vim. It's the fastest
and lightest, has the most shortcuts, even a 'vim mode'. It's fairly cheap
(compared to say, WebStorm) and doubles up as a great text editor and note
taker.

------
Tomte
Just in the last days I built a new web site (a list of children's books, so
many identical types of boxes).

I thought it would be a nice opportunity to finally learn a bit of Flexbox or
CSS Grid.

I failed with both. Until I realized I could use both, lay out the grid of
boxes and then have the content of the boxes flex. I'm sure everyone does
that, but the introductory articles I've read never mentioned that it's not
either-or.

------
lubujackson
As someone who more or less recently did this, I can tell you about my
journey. I went from fulldev LAMP stack (with some JQuery) to Vue ... which
immediately got me embroiled webpack config files, linters, Babel, ES5+ES6
syntax and all the rest. Vue is great and pretty quick to pick up the basics,
but as soon as you try to veer off the tutorial train you start finding
unhelpful code examples that require a bevy of alternative things to learn and
the stack keeps getting bigger and wider in every direction. As someone who
started learning webdev in the Perl days when you couldn't just Google
answers, this was the worst part of picking up new things - there is no "one
path" to do anything, everyone uses a slightly different stack and all these
tools are intertwined in a way that makes progress very tedious without direct
guidance.

For example, I learned the basics of Vue then tried to hack something
together. But all the example code I found was using single file components
(SFC) which is an alternative file structure for Vue that I had to learn first
in order to make sense of the code samples. Then I needed to setup Webpack for
some reason or another and Babel just seemed useful, so I spent a while in
config hell learning all about those. In order to keep things simple I tried
to avoid learning Vuex and Vue Router but I kept finding sample code that used
both to the point I ended up learning them in order to unroll code samples,
then I learned about event busses as an in-between solution to passing data
around - at which point I decided I might as well just use Vuex after all. But
it was frustrating to have to learn a big stack of things from a side channel
to really understand code I was reading... I dare you to find a Vue
tutorial/sample beyond a basic introduction that doesn't use some combination
of those things.

That being said, I ended up going a step further and now I'm using the Quasar
Framework. Quasar is like a wrapper around Vue that lets me avoid fussing with
Webpack/Babel/Linters/SASS/hot reloading configs and I would have probably
been better off doing a basic Vue tutorial then going right to Quasar. It also
simplifies the frontend with integrated material design and that has always
been the tedious side of doing full stack stuff for me, especially when
fussing around with early stage ideas.

So, finally, getting to the plusses: Hot reloading lets me edit/upload a file
and have the webpage change beneath me without even refreshing, that's pretty
cool. Frontend work is much, much better and simplified. I rarely have to fuss
with positioning CSS nightmares or worry about different screen sizes or
browser differences because that is all abstracted away from me, and I am fine
with that. And once it is setup with Vuex, the API-style data communication to
the backend is a simple and clean way to separate the front/back.

OAuth has turned out to be a hairier beast than it has any right to be, but
for me that is still a work in progress. Any advice on a simple solution for
that would be appreciated!

~~~
jonnycoder
I've been developing VueJS with Vuetify lately using only the CDN links with
editing an html file.

Quasar and Vuetify are very similar, with Quasar appearing to have a few more
components. The documentation is even very similar, and I like the readability
of Quasar a little better.

It's good to know this exists!

~~~
lubujackson
I looked at Vuetify too but what finally sold me on Quasar was the integrated
deployment to mobile, desktop and PWA.

------
carapace
If you just want to get something done check out Elm lang.

------
brillout
Does someone know a tutorial for people like OP? Someone that knows
programming but not modern web dev.

I want to write such tutorial.

> It's hard to build a mental model when things are happening at 4 level of
> abstractions away

I feel you.. the JS ecosystem needs more guidance. I'm trying to do that with
Reframe:
[https://github.com/reframejs/reframe](https://github.com/reframejs/reframe).
The goal of Reframe is to precisely to guide you through web dev and give you
a good and simple start.

It's new and work-in-progress though.

Feel free to hit me up on discord
([https://discord.gg/kqXf65G](https://discord.gg/kqXf65G)) if you have
questions about web dev. I'm happy to help.

Also, I'm looking for people to write such "modern frontend for backend
developers" tutorial, if someone reading this would be up for it.

\----

As for your questions:

> What is a minimal set of JS/CSS frameworks, templating engine, deployment
> tools, IDE I need?

If you need an SPA then I'd recommend [https://github.com/parcel-
bundler/parcel](https://github.com/parcel-bundler/parcel). There is also
[https://github.com/facebook/create-react-
app](https://github.com/facebook/create-react-app) which is super popular but
I don't recommend it. (Because it's based on Weback and I believe that Parcel
will eventually become the state of the art to build web assets.)

If you need SSR then
[https://github.com/zeit/next.js](https://github.com/zeit/next.js).

If you are not sure whether you need an SPA or SSR, let me know. I'm happy to
elaborate.

Another option is to use to the web framework I'm building
([https://github.com/reframejs/reframe](https://github.com/reframejs/reframe)).
The nice thing about it is that it allows you to build an SPA as well as an
SSR app. And even better is that you can start with an SPA and easily switch
to SSR later and vice versa. This means that you can start hacking today while
later deciding whether SPA or SSR is right for you. So my (biased)
recommendation would be to use Reframe. Although Reframe is new and if you're
not an early adopter, then it's probably nothing for you right now.

> a plethora of frameworks, transpiled languages, etc such as: Gulp,
> Typescript, JSX, Dart, Angular, React, Bootstrap, Babel, Wordpress, Drupal,
> Flutter, NPM, Web assembly, Vue.js, Minification of code before deploying,
> jQuery, and a gazillions others

I recommend to start with the simplest setup possible and later decide if you
want to add niceness to your stack. That is: JavaScript with Parcel, Next.js,
or Reframe. You'll eventually realize over time what you need or not.

And I wouldn't even start with bootstrap, instead I would use CSS flexbox.

As for API between your frontend and backend you can use
[https://github.com/reframejs/wildcard-
api](https://github.com/reframejs/wildcard-api). It's another thing I built
and it's much much easier than GraphQL and REST. Which is neat to get up and
running quickly.

In a nutshell: start with minimalistic simple stack. You'll figure all the
rest later while building your app.

> Auth support (custom and Google OAuth)

Just curious -- why do you need custom auth? Why not social login only?

------
chovy
Vue is all you need to know..
[https://fullstacknews.com/t/vuejs](https://fullstacknews.com/t/vuejs)

~~~
bdcravens
According to the question asked, I don’t even think you’d need any JS
framework. If you do, Vue is a fine framework, but it’s far from all you need
to know - there’s a lot that has changed since 2004 that is a prerequisite to
Vue.

