Back to the Future

Rate this content
Bookmark

Everything old is new again. But this time we have the lessons of the past to guide us into the wild unknown. Sunil wants to revisit a few older ideas, and mix them up with the new capabilities of the edge and the web platform, and see if we can 10x the applications we build today.

This talk has been presented at React Advanced 2022, check out the latest edition of this React Conference.

FAQ

The hero's journey is a storytelling pattern where a protagonist starts from nothing, faces obstacles, disregards advice, reaches a low point, and then, through support or inner courage, overcomes challenges and returns transformed with new knowledge and insights.

Initially viewing technology as a means to pay bills while pursuing music and writing, the speaker's perspective shifted after learning web development fundamentals, which opened up a world of possibilities, leading to a dedicated career in technology.

The speaker experienced burnout due to prolonged work stress, affecting their health and relationships. Recovery involved quitting smoking, improving sleep and diet, and mending personal relationships, ultimately leading to a healthier lifestyle and better personal connections.

The Cool Computer Club is an initiative by the speaker aimed at tackling seven significant projects to solve global issues using technology. The first project focuses on developing an easy-to-use Multiplayer Development Kit for real-time applications.

Working at Cloudflare, the speaker was involved in improving the CLI and learned about edge computing's potential, realizing that technology initially reserved for specialists was becoming accessible for all developers globally.

Sunil Pai
Sunil Pai
30 min
21 Oct, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The speaker shares their personal journey in the software development field, from starting in technology after college to experiencing burnout and taking steps towards self-care. They emphasize the power of technology and accessibility, as well as the emergence of edge computing. The speaker introduces their project, the Multiplayer Development Kit, and discusses the challenges of building real-time multiplayer apps. They also highlight the importance of work-life balance and personal growth in the industry.
Available in Español: De vuelta al futuro

1. Introduction to the Hero's Journey

Short description:

I was here last year and it was so great and we're back again. My talk this time isn't as technical as I usually do and it's a little personal which is why I'm frightened as shit at the moment. The hero's journey is a storytelling pattern that is probably the most popular way to tell a story right now. So this talk is kind of a story about me. So this is me right after I got out of college, and I just started working in technology. I thought I was going to be a musician and a writer, a true artist.

I was here last year and it was so great and we're back again. It's really nice that the conference season is back alive. Clearly, very few people got the masking suggestions.

My talk this time isn't as technical as I usually do and it's a little personal which is why I'm frightened as shit at the moment. But it's something that I called back to the future.

Before we start, a quick announcement. I'm incredibly happy to announce that I will be the next prime minister of the United Kingdom. It's such an honor to accept this role. I promise to deliver on my campaign promise of getting process.exit done. Everyone's mentioned it as a promise but I truly will deliver on it.

The hero's journey is a storytelling pattern that is probably the most popular way to tell a story right now. Movies, books, comics, short stories, the idea is of a protagonist who starts from a point of zero and ventures out into the world or into a situation and faces numerous obstacles, a mentor defines advice, disregards it, and finds themselves at a very low point where they think everything is lost. And then by some magic, advice, friends, support systems, inner child, finding the courage, they crawl back out of that space and they return to where it all started, but as a new person, with new knowledge and a new way forward.

So this talk is kind of a story about me. It's kind of weird to even use the phrase a hero's journey, because, well, it sounds completely full of yourself, right? Like you are, of course, the hero of your own journey, but everyone is the hero of their journey. But it's fine. I'm trying something new. You all get to see a little raw version of how I think about a few things.

So this is me right after I got out of college, and I just started working in technology. I was doing a little bit of the contracting life, which meant that I could finally afford a nice guitar for myself. That's my blue Les Paul that I just loved to bits. I still have it. Look at how nice it is in the light. Just take a second. Just a beautiful guitar. I also got myself a little effects kit and an amplifier. See the thing is that I thought I was going to be a musician and a writer, a true artist. Technology was there only to pay the bills. It was never going to be a full-time thing. It would just pay the bills until I figured out how to have the seminal novel or a great album that's a fusion of Indian and Western rock music, of course.

2. Discovering the Power of HTML, CSS, and JavaScript

Short description:

But I'd done really poorly in college, and I found myself writing JavaScript for a small contracting company in Hyderabad, India. HTML is how you structure your UI. Style tags. You use CSS to style your page to make it look a particular way. And you write JavaScript for behavior. It felt like the world was open to me. You can't actually write HTML by hand because it's hard to maintain. This is me giving a talk at one of my first JavaScript conferences in India called JSFoo, great conference. I had made it part of my identity for learning what all the tools and libraries were, which one would be the best fit for you, etc. I was able to use my skills as a web developer in small companies, big companies, government firms, as a designer, as a developer.

But I'd done really poorly in college, and I found myself writing JavaScript for a small contracting company in Hyderabad, India. And I was being taught web development by a woman. And in about 5 or 10 minutes, she taught me what would hold me for the rest of my career. HTML is how you structure your UI. Style tags. You use CSS to style your page to make it look a particular way. And you write JavaScript for behavior. And it was literally this snippet of code and looked incredible. In 10 minutes, I figured, oh my God, I could do anything with this. I can take any problem that is presented to be solved on a computer and pattern match it against building a little bit of a structure of a UI, styling it and giving it behavior. It felt like the world was open to me.

And then right after that, she told me that this is never how you will actually write code. See the thing is that you can't actually write HTML by hand because it's hard to maintain and you need to use a templating language and you need to spread it about a bunch of things. You will never write your style in line inside your HTML. You'll write style sheets and use class names and architectures like, well, BEM came out in the late 2000s. This was way before then. You will never write an event handler directly on your element as well because that is hard to maintain. This is way before even DevTools, so you actually had to use Alert for debugging. And that kind of broke me, but I figured that's how technology is built, by learning the systems around it, by learning architectures and theories.

This is me giving a talk at one of my first JavaScript conferences in India called JSFoo, great conference. I was part of the organizing committee, so I still feel a soft spot for it. So, when I say, it's the best conference, no harm done to React Advanced, just that it was a conference I was ignored in. The slide actually says, embrace templating, because templating languages were the rage at the time, Jade, Handlebars, Pug. There were like ten, I don't even remember all of them. And I had made it part of my identity for learning what all the tools and libraries were, which one would be the best fit for you, etc. Why you would pick something, what architecture system you would build, because nobody should be writing raw HTML, CSS and JavaScript, I thought. And I then spent the next fifteen odd years across a number of companies. It's kind of weird, I look at this and I'm like, oh shit, I job hopped a lot, but I promise you, I didn't piss off everyone. Actually, I learned a bunch of things, I moved on to the next place. What I'm trying to make, the point I'm trying to make here is I was able to use my skills as a web developer in small companies, big companies, government firms, as a designer, as a developer, I remember writing the Yahoo maps rewrite, we scaled Myntra, which was an ecommerce startup from like ten engineers to like 500, that was great.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
The Epic Stack
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Watch video: The Epic Stack
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.