Hey folks, I was hoping in this latest edition of this series, some folks could weigh in on the rest of the frontend JavaScript ecosystem. I think we've covered the big three, but what is the rest of the landscape.
What are the big topics and concepts in frontend these days?
Oldest comments (23)
Overtime, developers had real struggle with many processes like:
That's when we saw stuff like NPM, Babel, WebPack, and Grunt.
Not just that... part of the tools that we took for granted came from similar struggles, such as browser dev tools.
That's a nice way to put it.
What are the main struggles that the other parts of the webdev ecosystem are trying to solve?
Popularity of frontend frameworks has given way to demand learn paradigms like functional programming even more than before.
I found this helpful when I tried to get to grips with it:
frontendmasters.com/books/front-en...
Imagine a box full of leftover HDMI, USB, power cords, and that one random LPT or serial (you can't remember) all tangled together. You know you have this box or had one till you finally said "eff it" and purged it. But you know what I'm talking about.
Now imagine the same thing, but it is snakes tangled together instead of cables.
Now imagine the same thing, but it is your leftover xmas lights, some of which you still have even though that one bulb is broken making part the lights not work.
Now imagine they're all in the same box actually. And you have a machine that makes these boxes on demand. Your own little cord-snake-lights-in-a-box factory. It's even nice enough to put a bow on the box for you.
Now slap a label on the box that says "reactive". You don't know why, but just do it.
There is the current front end development landscape.
👏👏👏👏
This should be the landing page for vanillaes.com
Stencil is that better lunch, but you actually want to eat it 🤣
(Sorry, I had to 😁)
I haven't seen much of Stencil as of yet.
It's in the same space as Svelte, but Typescript native and compiles into spec-compliant web-components by default.
Been using it since Beta without a framework (or using stencil as the "framework") and it's been pretty amazing. It feels more like I'm writing Vanilla JS with Typescript support.
It supports the major frameworks too... I just got tired of chasing the upgrade cycle.
I can have beta components I built a year ago sitting on the same page with 1.x components from today, and if the old component ain't broke, I don't have to mess with it. I just upgrade when I need it.
I have pretty much everything I need from a framework, but I don't pass any "framework" code to the users, just the compiled vanilla WC.
Built by the Ionic team and they built Ionic V4 with it (but ionic isn't required for it) and I know Apple used it for the new Apple music, and (anecdotally, through friends) a few other large companies are evaluating it...
Stencil
That leftover pizza though... 👌
Svelte is when mommy packs a lot of snack bars and call it your nutritional balanced meal
ELI5, pure basics:
there's JS, which adds functionality to a document
Vue, Angular and React are Javascript frameworks that help you creating web apps more easliy. You don't differentiate between HTML and JS here anymore, so it feels like some kind of magical HTML on steroids.
Typescript is a form of Javascript that has your grammar teacher looking over your shoulder
npm is a big bucket with all the code snippets that people smarter than you have made. feel free to use them, but only take whats necessary!
Sass/Less/PostCSS let you organize your CSS, so you can stay sane in large, complicated projects
Babel takes your fancy, modern JS and transforms it into old-time-standard JS, that even your uncle's browser (the one with the blue letter e and five toolbars) can understand.
Webpack takes all your code and wraps it up into a ready-to-deploy website.
Jest makes sure that your code snippets work fine one by one
Cypress makes sure that your code snippets play nice together
Lighthouse makes sure that you didn't accidentally write too much code
I think that more often you need to write more code to improve your app performance, thus improving the Lighthouse score.
You do when writing on top of other code that already hurt your a11y and perf scores.
Build from scratch with semantic HTML, WAI-ARIA and progressive enhancement in mind and you'll be fine.
The tools we work with right now, like node packages and frameworks for everything just don't encourage that style of working. In all our tooling confusion, some people forget that websites are performant and accessible by default.
Agreed! I was actually thinking about this specific scenario. My bad, I didn't describe my argument properly :)
MVU style apps as introduced by Elm. I use F# Elmish now. This is my favorite way to make front-end apps. I have found it very maintainable after multiple years in production, unlike every framework I ever tried. (They start out really good, but eventually becomes too much messing with framework abstractions instead of my own code.)
Imagine you have a pile of meat and prepared small intestine
You grind up the meat, feed it into the intestines, twist it up, and voila. You have sausage.
But sausage isn't reactive enough. So you grind up the sausage into a pile of sausage+meat amalgam and use it to make new -- slightly different -- sausage.
Et voilà, 'modern' FrontEnd web development in a
nutshellsausage.tl:dr; Yo dawg, I heard you like sausage
I'm surprised, that webassembly (Wasm) has not been mentioned yet.
Wasm is designed to be compiled from higher-level languages that can run the client code, therefore replacing the need of JavaScript.
This allows client-side applications writting in languages such as C#, Python or Java.
Interesting to know is that Wasm is already shipped and supported by all major browsers.
A few interesting tech specific links: