Stop Breaking The Web

Talks

Tom Dale

#single-page-applications-spa

#client-side-rendering

#model-view-controller-mvc

Stop Breaking The Web

by Tom Dale

In the talk "Stop Breaking The Web," speaker Tom Dale addresses the importance of URLs in modern web development, paralleling their function with telephone numbers. Dale criticizes the tendency among JavaScript developers to neglect URLs, which undermines the integrity and usability of web applications. He outlines a new architectural paradigm called RMVC (Router-Model-View-Controller), advocating for applications that treat URLs as essential components rather than afterthoughts.

Key Points:

- Historical Context: Dale begins with the history of telecommunication, highlighting how phone numbers, developed to manage connections efficiently, serve as an analogy for URLs.
- The Role of URLs: Just as phone numbers are essential for connecting calls, URLs are fundamental for navigating the web. They represent the web's structure and should be treated with the same respect as foundational elements of communication.
- Web Development Challenges: Many developers face difficulties accommodating modern architectures while maintaining the contextual importance provided by URLs. This often leads to applications that are less coherent and harder to navigate.
- RMVC Framework: Dale introduces RMVC, where routing principles prioritize URL mappings, ensuring that applications remain traceable and user-friendly. In this model, any screen change updates the URL, enhancing the user experience.
- Demo and Practical Examples: He proposes building a simple blog application in 50 lines of code, demonstrating how JavaScript applications can integrate URLs effectively. This application allows users to navigate using browser controls without losing context.
- Concluding Thoughts: The speaker emphasizes that web developers should utilize the capabilities of modern browsers, incorporating URLs into their applications to support an interconnected web experience.

Dale concludes with a call to respect the core principles of the web while innovating with new technologies, ensuring that URLs remain essential as developers build the future of web applications.

00:00:20.160 Tom Dale has stepped in and is good enough to fill the space. Tom is not a Rubyist; we actually lied to him and told him this was a JavaScript conference, so be sure to ask him lots of hard questions about Ruby. Tom is an engineer at Tilda, and he is a self-confessed hipster because he was doing JavaScript before it was cool. This is not Tom Stewart doing impossible programs; this is Tom Dale talking about why we should stop breaking the web. Thank you, Tom.

00:01:09.600 Thank you, Josh. I'm glad to be the first to welcome you to GoGaRuCo. You probably recognize me as the 'angry telephone booth' on Twitter. I'm going to give you a version of a talk I just delivered at JSConf EU in Berlin last week. When I went on stage, I looked a little bit like a full hipster with a big, overflowing beard, which I had because my beard trimmer was not charged and I forgot that Germany operates on 240 volts instead of 120. I tweeted about my predicament saying my beard only supports 120-volt outlets, so I'll be doing a talk in character as a wildlife lumberjack. However, I learned an important lesson: don’t ask for sympathy on Twitter because the only response I received was this image.

00:02:11.440 So today, I want to talk about a new architectural paradigm: I'm going to discuss the multiple MVCs. This concept is going to blow traditional MVC out of the water and is how we should be architecting our applications. Following up on Yehuda's talk, I drew a diagram of what this architecture looks like.

00:02:51.440 But actually, before I talk about computers at all, I want to discuss telephones, specifically the phone that you probably have in your pocket right now. It might be an iPhone or an Android phone, and it likely has more computing power than what the human race used to put a man on the moon. It's incredible to think that I can fly from the United States to Germany and still receive all my phone calls and texts upon landing, assuming I'm willing to pay AT&T's steep international rates.

00:03:02.959 The global telecom infrastructure allows us to connect with people all over the world, and the reason I ask for someone's phone number is rooted in a historical event involving measles. Do not, by the way, Google image search for measles; it’s quite disgusting. Let me explain how measles relates to phone numbers by giving a brief history of the telephone. Alexander Graham Bell was the first person to make a phone call, and at that time, he didn’t need phone numbers because he owned the only two phones in existence, which were connected directly together.

00:03:45.520 However, this solution wouldn't scale for very long, so they had to invent telephone exchanges. Initially, when someone wanted to make a call, they would pick up the phone and connect to the exchange, requesting a specific person by name. The operators had to be well-trained and experienced to manage these connections swiftly, or the process would become slow and inefficient, as they didn’t have computers.

00:04:19.200 During a measles epidemic, a physician named Dr. Moses Greeley Parker worried that the close proximity of operators in exchanges would lead to contagion. He proposed that it would be easier for operators to ask for phone numbers rather than names to connect callers, resulting in an efficient and scalable communication structure. The reason we dial a phone number today is because of measles in the 1870s, which makes phone numbers the way we now quickly identify and connect with people, even though they are a relic of the past.

00:05:55.840 Despite their efficiency, the telephone system remained slow and expensive; making long-distance calls often required lengthy waits. In the early 1900s, they began rolling out automatic exchanges, but it took time to phase out the manual systems completely. The phones in our pockets today are radically different from those old systems, yet we still use the same method—punching in phone numbers—to connect, highlighting the slow evolution of technology and the idea that new technologies must support older paradigms.

00:06:55.360 The URL on the web serves a similar purpose to telephone numbers. Originally, web browsers were designed to serve hypertext documents, yet we reference them in a method similar to how we use URLs in the same way people used phone numbers. This concept goes back to Tim Berners-Lee's original web browser running on a NeXT machine in 1990. The term 'hypertext' itself was coined by Ted Nelson in 1963, which is a cornerstone of web architecture.

00:08:33.600 The world wide web and hypertext systems, such as Bush's memex, are all systems for storing and navigating documents. But despite the advancements we’ve made in technology, we still manage these systems using languages similar to JavaScript that were designed for document viewers. The clever hacks that got us here, like cookies and the browser acting as a thin client to server applications, have fused the notion of documents and applications together.

00:10:24.320 Due to JavaScript’s limitations, a need arose to enhance web applications, pushing boundaries until users experienced groundbreaking interactivity, such as Google Maps. Yet at this crossroads, many developers still cling to the outdated paradigm of server-side applications with client-side views, struggling to adapt to a modern web environment.

00:11:34.240 We are in a situation where many developers try to split application state between client and server, creating a distributed computing problem. While some embrace solely JavaScript applications, they often end up being unsatisfactory and reminiscent of the earlier Flash-based online experiences that most have outgrown. Thus, in the same way the phone number is the universal UI of the phone system, the URL becomes the universal UI of the web.

00:12:02.000 Increasingly, developers neglect URLs, believing that applications can exist without them. However, this creates a dissonance for users who expect familiarity and functional navigation. To progress into the JavaScript future without losing the essential benefits and understanding of the web's foundations, it’s crucial to marry these two methodologies in a cohesive manner while avoiding additional complexities.

00:12:53.080 I often frame the necessity of building web applications around the definition of native applications. To create a native-like experience in applications, particularly regarding things like sockets and manual memory allocation, we’ve now reached a point where all these capabilities are available within the browser. This modern browser technology means we no longer have excuses for not architecting applications that take full advantage of these features.

00:14:00.800 It's important to clarify that being a web developer isn’t merely about writing HTML, CSS, and JavaScript. A true web developer builds applications that incorporate URLs. Otherwise, lacking URLs equates to simply building an executable file for FTP upload, which doesn’t facilitate the interconnected web experience.

00:14:50.000 Historically, development relied on MVC patterns. However, I propose a new paradigm I call RMVC—where a router plays the central role in managing navigation and state based on URL mappings. In this pattern, whenever something changes on screen, it updates the URL, ensuring that the application remains coherent, traceable, and respects the URL functionality.

00:15:11.360 For the next ten minutes, I’d like to demonstrate how to build a simple blog application in just 50 lines of code. While I can’t dive into every detail today, I will share a link where you can see this in action. This example pulls in a JSON feed of blog posts and renders them dynamically—a testament to the power of integrating JavaScript efficiently with URLs.

00:17:10.960 As you explore the demo, notice how each navigation action updates the URL correctly. This functionality allows you to command-click to open posts in new tabs, use browser navigation buttons, and even refresh pages without losing state or context. The ability to create a live-updating editor with markdown allows for seamless interaction, demonstrating the true potential of harnessing JavaScript for web applications.

00:27:08.880 In closing, remember that the browser is a unified space for content with a URL field at the top. Just as we use phone numbers to connect despite significant shifts in global telecom infrastructure, we will likely continue to rely on URLs as foundational elements of the web for the foreseeable future. Therefore, embrace the power of JavaScript applications, but do so with respect for the underlying principles that have made the web so robust.

00:27:55.279 Thank you.

GoGaRuCo 2013