How to Pick a Front End Web Framework

As someone with an embedded C and C++ background, I have to admit, the world of web programming seems bewildering and alien with all its frameworks and workflow engines and module bundlers and virtualization and containers. Does anyone even write code anymore, or has web programming simply become a systems integration problem?<p>It&#x27;s a testament to how awesome and diverse this field is that you can take two people, both think of themselves as professional programmers, and chances are each will be mystified by what the other person does day to day.

I liked the article, but there&#x27;s something I need to point out regarding CSS preprocessors. It&#x27;s way more important than making CSS &quot;a bit better&quot;.<p>Preprocessors allow you to achieve modularity and DRYness. They allow you to move the object-composition duty from the browser to the build process - hence avoiding overloading the browser with composition (i.e. composing a class with SASS mixins or extends, instead of plugging many classes in a single HTML element). They allow you to easily express relationship through class names instead of relying on DOM hierarchy (separation of concerns). And, obviously, they allow variables! Common and centralized palettes, sizing definitions, typography definitions; also, &quot;computable&quot; definitions (e.g. deriving a shades&#x2F;tints palettes via the built-in color management functions, or computing a typography scale from a base size).<p>If you have the time to learn CSS and a preprocessor adequately (and think about how to tackle common architectural issues having these characteristics in mind, isntead of borrowing solutions from e.g. OOP), then you might have clean, elegant and maintainable CSS (instead of a hairy jungle of rules that nobody in your team would want to mess with).

No matter how good you are now, your code when you&#x27;ve spent a year with a framework will be better. Consequently you should pick a framework (or language, or tool) and <i>stick with it until you actually have a good reason to move on to something else.</i> The benefits of jumping to whatever someone else recommends because they claim their choice is better for X, Y and Z reasons are likely less than the benefit of your own experience with a framework you&#x27;ve learned and understand.<p>90% of the speed of your code in terms of both writing and execution are a function of how well you write it, not the libraries you&#x27;re using. Writing better code comes from practising (and thinking).

I&#x27;m unique in that I&#x27;ve never done any web development whatsoever (all my work is in finance and HPC), so I know zero Javascript, no CSS, and only the most rudimentary HTML. This article reminds me why I stay away from the web dev space.

I hate modern Web dev so much.

I&#x27;m surprised that the &quot;nothing complex &#x2F; hack up a quick prototype&quot; recommendation is Angular. I get that it&#x27;s powerful, but there&#x27;s so much deep magic inside angular [1] that I find even simple stuff takes significant forethought and wrangling.<p>As a substitute, why not Ractive.js? It&#x27;s simple and does what you&#x27;d expect. You put<p><pre><code> {{#each foo:i}} &lt;span class=&quot;{{classname}}&quot;&gt; {{foo[i]}} &lt;&#x2F;span&gt; {{&#x2F;each}} </code></pre> in one place, and<p><pre><code> ractive.set({ foo: [&#x27;a&#x27;, &#x27;b&#x27;, &#x27;c&#x27;], classname: &quot;output&quot;, }) </code></pre> in another, and things just work. No messing with insanity like:<p><pre><code> angular.element(myDomElement).scope().$apply(); </code></pre> &#x2F;rant. Maybe I&#x27;m missing something deep here.<p>[1] Introspecting the parameter names of the callback function I passed in? <i>Really?</i>

I can confirm that the explosion of package managers (npm&#x2F;bower), task runners (gulp&#x2F;grunt), UI frameworks (foundation&#x2F;bootstrap&#x2F;skeleton), pre-processors (sass&#x2F;less), JS frameworks (...), etc., that you can waste entirely too much time deciding between them.<p>As an aside, I&#x27;ve been working on a project that uses Angular 1.3, and I&#x27;m not entirely sold yet. I do like that modules are usually contained, but the dependencies are hard to reason about (plus there&#x27;s all the black magic I&#x27;m convinced they had to use to get this to work). Everything about the application feels sluggish, because there&#x27;s a ton of other JS frameworks being pulled in. So whatever you do, don&#x27;t mix and match 10 of them. It&#x27;s painful as a user

After reading the article I think what the author meant is: How to get even more confused with the insane plethora of Front End stuff out there and give up life.<p>But I can&#x27;t blame him. I&#x27;ve also tried to create lists, to reason it all. Several times, and to no avail. One thing he got right, an image at the very beginning with the word <i>chaos</i> in the middle.<p>Good luck!

&gt; Full Stack EngiNerd. I use magic to make IT things work and keep people happy.<p>Keeping people happy is a good thing[1]. But all those words make me cringe so hard.<p>--<p>[1] - unless they are serial sex offenders.

Rather than evaluate every framework under the sun to try and find the one that&#x27;s perfect for your specific situation and needs, I would probably focus on finding something that&#x27;s widespread, well-documented, has a lot of momentum behind it, and an active community. Right now that would probably be React or Meteor.

How did this even make the front page? There&#x27;s nothing of value here.

&gt; Language Checklist &gt; &gt; When you have answered those high-level questions, it&#x27;s a good time to talk to your teammates and pick up a language!<p>No, No and No.<p>Please, just use something that&#x27;s as close to plain javascript as possible. Your client will thank you because you don&#x27;t have to reinvent wheels for the sake of programmer porn...

Need to do something? Have a framework! Here, more frameworks. Frameworks for everyone!

The way I chose in the past. Use a jobsite (in my case www.cwjobs.co.uk). Type in framework. Count number of jobs. If one is significantly bigger in the job market, this gives me more flexibility and job security going forward.<p>This has resulted in me going with AngularJS as there are 7-10 times the number of jobs advertised vs other frameworks.<p>My current role also uses typescript and was using it before the Ang 2 announcement. I do watch where the various technologies are going within the whole stack.<p>I also find articles like this interesting as they show movements in the technology stack that I should be aware of <a href="http:&#x2F;&#x2F;angularjs.blogspot.co.uk&#x2F;2015&#x2F;09&#x2F;angular-2-survey-results.html" rel="nofollow">http:&#x2F;&#x2F;angularjs.blogspot.co.uk&#x2F;2015&#x2F;09&#x2F;angular-2-survey-res...</a><p>I am currently using grunt, but feel I need to get into gulp.

I recently tried to explain my setup to a friend and realized this is getting out of hand. I like the do one thing&#x2F;pluggable UNIX philosophy as much as anyone, but saying &quot;Typescript,tslint,gulp,jspm,Karma,mocha,chai,sinon,nightwatch,stylus,stylint,istanbul,react,skeleton,jsx,editorConfig,babel,Cordova&quot; makes your head spin. Also getting them all to work together and play nice with sourcemaps and gulp tasks is a pain. Just setting up the tooling for the project BECAME the project. Sure it&#x27;s IDE independent, pluggable and makes for clean development, but next week another thing will be shiny and I&#x27;ll be doing more boilerplate. <i>sigh</i>

IMHO, as an outsider, I reduce the less risky choices to 3:<p>- javascript -&gt; meteor + react<p>- whatever language -&gt; whatever language most popular framework + react<p>- ruby -&gt; elixir -&gt; phoenix + react<p>Feel free to criticise.

Or skip all that and go use React and Webpack.

I find it odd that he didn&#x27;t include Jade in this long list of tools and technologies of modern web development as it&#x27;s IMO the best tool hands down out there when it comes to HTML modularization&#x2F;componentization and I can&#x27;t imagine now developing websites or even web apps without it in my workflow.

Shouldn&#x27;t the meme be:<p>AUTOMATE<p>ALL THE TASKS<p>I feel like memes should be left out of serious write ups because if you do it wrong, or if you have an audience who doesn&#x27;t normally consume memes, you will end up with what happened to me, which is my attention being focused on the wrong place.

I use MithrilJs with Coffescript. Small and Fast.

Why would you want to include grunt or gulp? Shell scripts do the job just as well and can be run from npm. Bash is streaming, parallel etc etc. You can do everything you want with &amp;, &amp;&amp;, |, and &gt;