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.

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 Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Fighting Technical Debt With Continuous Refactoring
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
The Epic Stack
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Modern web development is fantastic. There are so many great tools available! Modern web development is exhausting. There are so many great tools available! Each of these sentiments is true. What's great is that most of the time, it's hard to make a choice that is wrong. Seriously. The trade-offs of most of the frameworks and tools you could use to build your application fit within the constraints of the vast majority of apps. Despite this, engineers consistently struggle with analysis paralysis.Let's talk about this, and a solution I am working on for it.

Workshops on related topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 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 Conference 2021React Advanced Conference 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 Kuznetcov
Mikhail Kuznetcov
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.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)