<story><title>Ask HN: What happened to vanilla HTML/CSS/JS development?</title><text>I&amp;#x27;m not a web developer, but I dabble in it because I find it interesting. I went through some courses like The Odin Project and others to learn the basics of HTML&amp;#x2F;CSS&amp;#x2F;JS, and I thought it made a lot of sense: HTML structures the page, CSS handles the style, and JS handles the functionality.&lt;p&gt;However, after working for software companies for a few years, it seems like almost nobody uses these technologies in the way they&amp;#x27;re presented on websites like w3schools to make web applications. Instead, they use component-based frameworks like React. To me, these frameworks seem way more complicated than HTML&amp;#x2F;CSS&amp;#x2F;JS, and I don&amp;#x27;t understand what problem they&amp;#x27;re trying to solve. What makes the trade-off of all that extra complexity and abstraction worth it? Aren&amp;#x27;t HTML&amp;#x2F;CSS&amp;#x2F;JS perfectly fine and time-tested tools for web development on their own?</text></story><parent_chain><item><author>yakkomajuri</author><text>The key reason web frameworks dominate these days is that it&amp;#x27;s very hard to keep the UI in sync with state.&lt;p&gt;That&amp;#x27;s it - that&amp;#x27;s the problem they solve. People started writing vanilla HTML&amp;#x2F;CSS&amp;#x2F;JS and struggling to make &amp;quot;reactivity&amp;quot; (hence React) work well when web applications got complex with a lot of state to manage. So we started building frameworks on frameworks and abstractions on abstractions and ended up where we are today.&lt;p&gt;It&amp;#x27;s gone a bit far but the overall purpose is a valid one.&lt;p&gt;(From someone who has used React professionally but uses vanilla HTML&amp;#x2F;CSS&amp;#x2F;JS for his personal website)</text></item></parent_chain><comment><author>xmonkee</author><text>&amp;gt;The key reason web frameworks dominate these days is that it&amp;#x27;s very hard to keep the UI in sync with state.&lt;p&gt;This isn&amp;#x27;t wrong, but going one level down, this is how it bites you:&lt;p&gt;- The imperative DOM api just suuuucks. Please try it for yourself to see. Even if you&amp;#x27;re writing a very limited bit of reactivity in your app, you will be forced to invent your own declarative framework very soon.&lt;p&gt;- Very hard to make reusable components (at least before webcomponents, which I haven&amp;#x27;t used personally)&lt;p&gt;If you want to stay close to vanilla, I recommend one of the following solutions:&lt;p&gt;1) &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;htmx.org&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;htmx.org&amp;#x2F;&lt;/a&gt;
2) &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;hyperhype&amp;#x2F;hyperscript&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;hyperhype&amp;#x2F;hyperscript&lt;/a&gt;
3) &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;vuejs&amp;#x2F;petite-vue&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;vuejs&amp;#x2F;petite-vue&lt;/a&gt;</text></comment>
<story><title>Ask HN: What happened to vanilla HTML/CSS/JS development?</title><text>I&amp;#x27;m not a web developer, but I dabble in it because I find it interesting. I went through some courses like The Odin Project and others to learn the basics of HTML&amp;#x2F;CSS&amp;#x2F;JS, and I thought it made a lot of sense: HTML structures the page, CSS handles the style, and JS handles the functionality.&lt;p&gt;However, after working for software companies for a few years, it seems like almost nobody uses these technologies in the way they&amp;#x27;re presented on websites like w3schools to make web applications. Instead, they use component-based frameworks like React. To me, these frameworks seem way more complicated than HTML&amp;#x2F;CSS&amp;#x2F;JS, and I don&amp;#x27;t understand what problem they&amp;#x27;re trying to solve. What makes the trade-off of all that extra complexity and abstraction worth it? Aren&amp;#x27;t HTML&amp;#x2F;CSS&amp;#x2F;JS perfectly fine and time-tested tools for web development on their own?</text></story><parent_chain><item><author>yakkomajuri</author><text>The key reason web frameworks dominate these days is that it&amp;#x27;s very hard to keep the UI in sync with state.&lt;p&gt;That&amp;#x27;s it - that&amp;#x27;s the problem they solve. People started writing vanilla HTML&amp;#x2F;CSS&amp;#x2F;JS and struggling to make &amp;quot;reactivity&amp;quot; (hence React) work well when web applications got complex with a lot of state to manage. So we started building frameworks on frameworks and abstractions on abstractions and ended up where we are today.&lt;p&gt;It&amp;#x27;s gone a bit far but the overall purpose is a valid one.&lt;p&gt;(From someone who has used React professionally but uses vanilla HTML&amp;#x2F;CSS&amp;#x2F;JS for his personal website)</text></item></parent_chain><comment><author>samwillis</author><text>&amp;gt; keep the UI in sync with state&lt;p&gt;This is absolutely true, however there are some newer tools that are appearing that make this much easer with vanilla html - htmx, hyperscript, alpine.js for example (links below).&lt;p&gt;These newer tools are all made possible due to the “new”(ish) MutationObserver api, it allows you to intercept new dom elements being placed into the document. These libraries let you simple decorate your “real” html with extra attributes enabling easer client side state management. No build step required.&lt;p&gt;My hope is that a combination of these type of tools, js modules and web components will result in dropping all js build tools. With http2&amp;#x2F;3 we don’t really need bundling. In many ways it the bundling and transpiling process that has contributed the most to the friction with JS development.&lt;p&gt;My other observation would be that as js frameworks have evolved they have become more “enterprise” ready, adding tooling (complex central state management, strict typing) to make working in large teams on very large codebases easer. Much of this isn’t really necessary for the majority of we development.&lt;p&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;htmx.org&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;htmx.org&amp;#x2F;&lt;/a&gt;&lt;p&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;hyperscript.org&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;hyperscript.org&amp;#x2F;&lt;/a&gt;&lt;p&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;alpinejs.dev&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;alpinejs.dev&amp;#x2F;&lt;/a&gt;</text></comment>