Special Edition — WeAreDevelopers, New Brand, Same Vision
UIScript DevBlog, Week 10
👋 Hi, Everyone,
This is my tenth article in my devblog and as a small celebration I’d like to share three updates.
1 — Meet me at WeAreDevelopers World Congress 2024
I am attending the WeAreDevelopers World Congress in Berlin next week (not as speaker, just a regular attendee), and if you are following my blog and want to meet just let me know. I’ll leave my email address in a comment so feel free to shoot me an email and we can schedule a casual meeting. Update: address is removed but you can still reach me in the comment section.
2 — New brand: JavaScriptUI becomes UIScript
I am moving away from the name JavaScriptUI in favor of a better, shorter name: UIScript. The project is the same, the language is the same, but I want to emphasize that, even though the current library is geared towards front end JS, it is a language-agnostic paradigm. In the future I am planning to explore the idea of using UIScript as an SSR engine, or even using other scripting languages like TypeScript, Python or PHP. Regardless, I want to emphasize that UIScript is a generalized, unopinionated approach to building user interfaces using scripting languages. And it sounds a lot cooler, so there’s that too. 😄
3 — Same vision, but a better explanation
There are some of you who don’t really understand the point of my library and/or my approach to front end development so in this article I want to clarify why I started this project, how I develop it and what my expected end result is.
Why?
Before I started programming, I had a formal education in architecture (brick and mortar, not software). By the time I started learning front end development, I was already proficient in several CAD programs and a wide range of creative applications. In addition, I also specialized in architectural visualization and 3D modeling, so imagine my surprise when I realized that the web doesn’t follow any well known conventions from any field that I previously studied, be it programming, graphic design, geometry or even typography. Most of the tools felt cringe, unintuitive, makeshift and unnecessarily new, making web development much more difficult than anything I’ve learned beforehand.
HTML, CSS and JS felt as if they were competing against each other instead of working together, with three different syntaxes, three different approaches and three different ideologies. And even these languages by themselves were chaotic, inconsistent and incoherent. Everyone I talked to was convinced that this is for the benefit of us all, even though it increasingly felt as if these languages were becoming more and more self serving and eccentric in reality. Instead of being coding languages, they felt more like religious cults with no real substance to show for it.
To me, this was just unacceptable. As I dug deeper and deeper I realized that most web devs, especially front end developers are actually being duped by all this nonsense. From completely misrepresented principles to outright lies, most obstacles in web dev were artificial, completely unnecessary and the result of mass incompetence. Visual layout building is hard, but don’t try to convince me that it is harder than calculus. And since I am trained to tell apart real artists from hacks, I also know a bullshitter when I see one.
How?
My main approach is twofold. I want to remove as much bloat and convoluted mess from the web as possible, while I want to introduce proper graphic design and programming concepts so that when I create a mockup or a prototype of a new website or web app I wouldn’t need to bend over backwards to translate it into HTML and CSS. In short, I want to find the common denominators not just between HTML, CSS and JS, but between graphic design, programming and the web as well, and remove the rest.
As it turns out, the most capable approach is to increase the share of JS in websites and decrease the share of both HTML and CSS. This might upset some zealots but this choice is only logical: JS is the only one out of the three that can define proper logic which opens up endless possibilities without any change in web standards and in browser engines whatsoever. It is also a general purpose programming language, meaning that, in a way, it has always been prepared for this, while HTML and CSS are special purpose languages without the possibility of extending them freely by the user. There is a reason why we can build even entire web servers in JS, but we will never be able to do that using pure HTML or pure CSS. Ironically, what little extension we have in HTML and CSS is only possible through JS.
Now, another approach would be to beef up HTML instead (some libraries are trying to do exactly that), but it is a dead end. To extend the functionality of HTML we either need to change the specs (good luck with that) or we need to include more and more JS, while moving over to JS is quite the opposite, it requires less and less HTML and CSS (if any). A full JS approach could, in theory, eliminate the need for HTML and CSS entirely by simply leveraging standard browser APIs. The two approaches just don’t compare.
This is a radical approach that might scare off some seasoned web dev pros, but I want to emphasize that it doesn’t take away anything from anyone, it only provides a new opportunity. If you are comfortable with building websites using regular HTML and CSS, or using mainstream front end frameworks, then be my guest. Use the tools that you are most comfortable with and ignore the rest. But don’t be a luddite and try to take away new options from programmers or graphic designers who are trying to get into web dev but struggling with the current state of the web.
What?
So what exactly is the end result that I am looking for? I want to design a coherent layout system for the web that can accommodate all layout models using a single organizing principle. I want this system to be based on geometry, and to use well-known, well understood and widely used programming and graphic design concepts. And I want this system to be able to grow in the future without sabotaging itself.
No compile, transpile or build steps, no change to the specs or to the browser engines, no new languages and paradigms and no forced opinions. Imperative or declarative, OOP or functional, whatever floats your boat.
And for all of you who made it this far, here is a sneak peek of the current state of my work:
App(
Stack(
Text("Hello, World!")
.fontSize(14)
.fontColor(Color.gray),
Button("Click me")
.padding(12, 40, 12, 40)
.cornerRadius(self => self.height / 2)
.onClick(() => window.alert("YAY!"))
)
.direction("top bottom")
.align({horizontal: "center", vertical: "middle"})
.gapY(20)
)
.title("Hello World example")
.language("en-US")
.backgroundColor(mode === "dark" ? "darkgray" : "white");
Thank you for your support and see you at WeAreDevelopers.
Have a great day!
⬅️ Week 9 — There is no box model in CSS — and this is why HTML tables are a disgrace