It's like I've died and woken up in a strange, bizarre world where the laws of physics are different, but I still inhabit the same world.
Does anyone else feel this way? Is this just how technology works?
import { Button, Dropdown, Slider } from 'antd' //bootstrap, materialdesign,...
const Header = () => (
<div>
<Button primary>Home</Button>
<Dropdown ... />
<Slider ... />
</div>
)
render(<Header />, document.querySelector('#app'))Historically, building something simple in an HTML page has always been simple. A field here, a button there, you're done.
But with increased requirements, that sort of work became exponentially more difficult to maintain. If you have 10 fields each with the same basic functionality, you'd end up repeating the same thing 10 times. If you wanted some complex state management, you're building it all from the ground up. Your code may be "simple" in the sense that you don't need a build tool, preprocessors, or any dependencies to maintain it, but it becomes increasingly difficult to maintain.
React, babel, webpack et al can make things much more complicated _to start_, especially for someone not acquainted with it. But the trade off is that things keep more or less the same level of complexity. Adding a feature is easier, duplicating an element or a screen is easier.
Have you ever worked in a mature babel code base? I have worked in many and frequently get contracts to clean them up. I have yet to see a clean one. Can you even point to a clean open source one?
The complexity doesn't reach some steady state, it just keeps growing.
The argument that something simple needs to be complex because of unknown future needs is a prime example of design based on emotion, not engineering.
JavaScript is in a bizarro land by itself. I think the main reason is that is a starter language for many folks (the initial learning curve is gentler), and once they get good enough, they decide to re-invent the wheel again and again, just a bit rounder and rounder.
Also, since probably a lot of younger folks get into JS, they are more guilable/eager to just try new things, no matter how broken are they.
Sometimes this actually creates real progress, often it just increases complexity with no real advantages apart being "fancy and different"
This will probably would have been the case in mobile as well, but the realities there are different:
1. You are stuck with what apple and google provides to you, and at max you can build some util frameworks to make things a bit easier. Most replacements attempts have failed.
2. There is a higher/steeper barrier of entry to ship good mobile apps, and smarter/more experienced folks steer away into following the latest fad.
Sure it was do-able and libraries like jquery, which have been shown to be slow, made it convient and easy to write it. But ultimately it was messy looking code.
Sure using the basic built-in UX like a button that post a form or a site that just had images on it was simple. Once you added interactivity and the web became a lot more than just dry course dumped information people wanted a way to navigate that.
Even the most simple website can be improved with a hamburger menu to have an always available nav menu instead of the classic scroll to the top or have a fat footer at the bottom.
So a convoluted CSS solution is available by using a <input> type 'checkbox' and seeing if its check in the place of the hamburger.
But really that's shoving your view logic and your ui logic together.
That covers the state of javascript before these libraries. What hacks, work arounds, or messy spaghetti code can we create to make it work. Since it worked for us 10 years ago then making maintainable, readable and sensible code should be considered bizarre and strange?
I see this push back a lot. I think it is cause originally learning HTML, CSS and Javascript was easy compared to what it is now. You learned mostly HTML and CSS and you learned the basic idea of functions and making API calls to the browser like document.getElementById or console.log.
But deep down I've met a lot of these 'older' and 'experienced' javascript developers that wonder why we are moving in such a 'necessary' direction. I find most of them don't really understand programming itself. What the javascript language is doing. What the concepts are. The fact that a lot of calls are to the browser api that are exposed via javascript and not natively part of the 'language' itself. Sure Node has some similar those functions because it's built-in to their library to mimic the similar environment.
Point is, if you enter any other language like Java, Python, C++, C#, Ruby ect, these way we use to code in Javascript were essentially anti-patterns and extremely round-about ways to solve problems instead of using proven design patterns that have been established throughout other languages.
So in conclusion I think the push back is that right now Javascript has become more difficult to learn or adapt at first with the notion that 'its easy'. But the truth is that it has caught up to more mature languages but the browsers have still been lagging behind requiring extra work to learn how to adapt tool chains to build these so they are compatible.
I have no issue with people writing a simple website in React, Vue or whatever SPA or UX framework they want. I think it's crazy if they just serve the straight javascript files as creating static files of their site is rather easy and makes the initial load times to paint quicker and javascript-free friendly. Therefore you get both worlds. Nice maintainable and readable code that is very easy to modify months later with the same benefits of your typical static pages.
Long rant but hopefully you can better see why things moved in this direction even for simple websites.
What would happen if we made the entire Internet a react application? Would that be "scalable"?
Please choose your words more precisely!
No UI in plain HTMl is scalable. If you have a UI each piece of code needs to be repeated on each page. Have a ten page website?
You need your footer, nav and whatever side bar on each page. Copy and pasted. What it changed? You need to change each and every page.
How did we get around this? WAY back we used server-rendered HTML. The server would serve different pieces, partials, to a piece of content.
This was done largely to PREVENT ugly and repeated code. Because making a simple UI in HTML/Javascript stack is overly repetitive and complicated.
No one needed to make server-side rendered pages to solve that issue but it did make maintaining that website easier. Eventually you could use server-side rendered pages to send data that was tailored to a user too.
This same problem happened on the front-end. Both the back-end and front-end started to use templating languages to help with these kind of repeated code.
The reality is a server creating the UI of a program and sending it to a user was OVER utilizing a server. All applications on a machine render and put together their UI. They utilize their power/cpu to construct those. So Web has started to move those templating languages to the front-end.
Some use build chains to create their pages other use SPA to contain it into one page. But the responsibility to construct the repeated components of the UI have become the clients-side for many sites. A server-rendered site is overkill for most these apps.
Things like middleman, jekyll, gatsby exist to do these for you. Create static pages that have repeatable components.
Pretending that none of these tools were created to actually solve a problem seems like you are ignoring what it's like to actually write a plain html/javascript website with any type of functioning UI.
Any form of website where you repeat components or interaction requires copying and pasting every time you edit 1 piece for every page or we use tools or server-side technology or frameworks to eliminate this.
If you wish to code in that style, in that world, or pick and choose what technology framework solves these problems (Rails, PHP) but complain out other frameworks that are front-end(React, Vue) then you seem to be closing your eyes to the full-stack development. Cause back-end programmers ran into these issues and solved them with templating engines themselves and now we are just doing that for front-end to solve the same issue.