Ask HN: Modern day web development for someone who last did it 15 years ago

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

thanks for this, enjoyed the post

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

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.

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.

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

Stay with Vim and just manipulate the DOM https://youtu.be/h_e5pPKI0K4

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.

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.

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?

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.

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.

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.

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!

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!

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

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

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. 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) 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. There is also 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.

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). 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. 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?

Vue is all you need to know.. https://fullstacknews.com/t/vuejs

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.