Understand Your Codebase to Innovate Faster

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

The transition from a monolithic architecture to a service based approach began a number of years ago. The advantage of a service based approach is to increase agility and shorten the build and release development cycle. And more recently the rise of micro frontends means that this approach not only encompasses backend application but also frontend development. However one side effect is increased complexity of the codebase. Resulting in challenges in terms of visibility into how components relate, who owns a component and the impact of activities on dependent components. This session will touch on these challenges and what is needed to maintain individual developer velocity.

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

FAQ

Key areas include adopting open source software, iterative development approaches, leveraging cloud computing, integrating continuous integration and delivery, and utilizing service-based architecture to decouple application logic.

The approach has shifted from 'Big Bang' and waterfall methodologies to more iterative and agile methods. This allows for quicker development cycles, faster feedback from stakeholders, and the ability to make adjustments earlier in the application lifecycle.

Cloud computing removes the need to manage infrastructure and networking at a base level, allowing developers to access databases and middleware on demand, which simplifies configuration, deployment, and management tasks.

Continuous integration and delivery streamline the development process by allowing frequent software updates, enabling quicker testing and faster feedback on smaller changes, thereby reducing the scope of errors and issues in deployments.

Service-based architecture involves structuring applications as a collection of services, which improves encapsulation and reduces dependencies. This makes it easier to update and modify applications with minimal impact on other components.

The inner loop refers to the day-to-day tasks of individual developers, such as coding and debugging, while the outer loop encompasses broader team activities like releases and sprints focused on product iteration and delivery.

Minimizing interruptions involves providing developers with better tools and resources to understand and navigate codebases quickly, enabling them to maintain focus and efficiency in their workflow.

A deep understanding of the codebase allows developers to make accurate and efficient changes, reducing the time spent on reading and comprehending code, which is a major part of the development process according to industry studies.

Sourcegraph provides a universal search platform that enables developers to search across all their code repositories, facilitating better understanding and navigation of the codebase, which enhances productivity and accelerates development cycles.

Simon Waterer
Simon Waterer
19 min
24 Oct, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
We can improve developer efficiency by helping people understand code more effectively through open source software, iterative development, cloud infrastructure, continuous integration, and service-based architecture. The software development lifecycle consists of an outer loop focused on team efforts and an inner loop for individual developers. A universal search platform helps developers understand and search code, reducing the time spent on code comprehension. Code navigation and automation tools like Sourcegraph enable developers to navigate code, adhere to best practices, and automate changes across multiple repositories.

1. Introduction to Software Development

Short description:

We're here to answer your questions and to share your insights. Hello, everyone. My name's Simon Walter. I'm a software developer at Microsoft, and I'm here to tell you a little bit about how we can improve developer efficiency by helping people understand your code base more effectively. In terms of preparing for this talk, I've been into software development technology for some time. So here's my list of five. Your list may be different. So open source software, when I started in software development, essentially the APIs, the libraries you had available to you were essentially the ones that shipped with the operating system or came with a development tool or platform you'd invested in. And of course, there've been big changes in terms of how people go about building out software applications. So, we've moved to a more sort of iterative approach. And of course, the move to cloud where we're, you know, again, from a software perspective, you no longer have to worry about getting a hold of infrastructure or networking at sort of kind of a base level, where you can actually go out and get someone to deliver you a database service or provide middleware on demand without having to actually worry about how to configure or deploy or manage it. And obviously, then, in terms of, again, that's providing additional building blocks, excuse me, in terms of actually building and delivering software solutions. And the last two in terms of continuous integration, delivery, very sort of aligned to sort of agile development. And then finally, in terms of service-based architecture.

We're here to answer your questions and to share your insights.

Hello, everyone. My name's Simon Walter. I'm a software developer at Microsoft, and I'm here to tell you a little bit about how we can improve developer efficiency by helping people understand your code base more effectively.

In terms of preparing for this talk, I've been into software development technology for some time. and how they're relevant to software development, and how we actually deliver software applications, and how we can actually accelerate that process.

So here's my list of five. Your list may be different.

So open source software, when I started in software development, essentially the APIs, the libraries you had available to you were essentially the ones that shipped with the operating system or came with a development tool or platform you'd invested in. Now, we have libraries from, obviously, front-end. We're at a React conference, of course, to back-end in terms of providing databases, search tools, you know, many, many libraries, and perhaps the challenges in terms of deciding what library or framework you wish to use.

And of course, there've been big changes in terms of how people go about building out software applications. So, we've sort of gone away from sort of the kind of Big Bang approach or sort of the kind of waterfall type of methodologies where we capture our requirements, you know, which takes some time. You know, I worked for some time for a research company. We did a lot of work for large government organizations. We suspend huge sort of requirement documents that we had to either read or prepare.

So, we've moved to a more sort of iterative approach. We'll be sort of of smaller chunks in terms of the capabilities we want to deliver. And that's great because it allows us to essentially shrink that loop between building and delivering applications or capabilities, additional functions, and getting feedback from our, you know, stakeholders or clients, customers. So, a much more sort of iterative fast-paced approach.

So essentially, you know, allows us to actually correct direction much earlier in terms of the life cycle of a particular application or solution.

And of course, you know, the move to cloud where we're, you know, again, from a software perspective, you no longer have to worry about getting a hold of infrastructure or networking at sort of kind of a base level, where you can actually go out and get someone to deliver you a database service or provide middleware on demand without having to actually worry about how to configure or deploy or manage it. And obviously, then, in terms of, again, that's providing additional building blocks, excuse me, in terms of actually building and delivering software solutions.

And, you know, I'd perhaps sort of actually say there's a parallel between sort of cloud computing in some sense and open source software. Again, they're kind of fundamentally about sort of providing additional building blocks in terms of to allow software developers to sort of focus on their business problems, their business functions and capabilities that actually are where they can really add value to their customers.

And the last two in terms of continuous integration, delivery, very sort of aligned to sort of agile development. Again, the focus is in terms of testing, which you've kind of frequently delivering software or delivering and deploying software much more rapidly. Again, shrinking that loop, but also enabling us to actually test on with smaller changes, getting additional feedback more quickly. Ideally, when you do run into problems, that sort of setup of changes that you perhaps have to evaluate in terms of finding the root cause is smaller.

And then finally, in terms of service-based architecture.

2. Building Software and the Inner Loop

Short description:

From client-server to three-tier to multiservice applications, the goal is to improve encapsulation and decouple application logic. The software development lifecycle consists of an outer loop and an inner loop. The outer loop focuses on team efforts, while the inner loop is about individual developers and their tasks. The challenge is to minimize interruptions and maintain a fast flow in writing software.

So, it's a big change in terms of changes in terms of how we actually build software from an architectural standpoint, so from sort of client-server to three-tier to these multiservice type of applications. And again, where the goal is to improve or increase encapsulation and decouple application logic. So again, making it much easier potentially to make changes within our code because your changes have less impact or limited impact on other services, et cetera, because you're sort of sitting behind some sort of service-based API. And that's relevant in terms of front-end applications as well, where there's sort of perhaps a move to sort of allow people to create sort of micro front-end applications. Again, where we have a set of composable application components, which we can sort of stitch together very easily.

So, I'd say, obviously, all of these, changes, initiatives, obviously, have had a sort of an impact in terms of how fast, how quickly we can actually develop software. But if we actually sort of think about the software development lifecycle, it's not sort of one big loop. Many people sort of tend to think of it as essentially an outer loop and an inner loop. So, the outer loop is essentially the releases, the projects, the sprints that we're actually undertaking. So, it's more of a sort of a team effort in some sense. And I probably argue that in terms of the five changes we had above is whilst they definitely actually improve that sort of development lifecycle, they're more focused on that outer loop. Certainly in terms of you think about agile development, continuous delivery, I mean, that's their sort of square in terms of trying to improve the efficiency of that outer loop. But they have benefits in terms of that inner loop. And the inner loop is really around what you're doing as an individual developer. Okay, I have to make some change to you, I have to add a new capability. I have to fix some problem that appeared within our sort of a test suite. There's an incident and I have to investigate that, or I'm trying to sort of remove some form of technical debt within an application or set of services. So that's really the focus in terms of the actual sort of individual developers when you actually get to that sort of, you're actually writing the code, you're actually closer to the source of the code. And of course, what we all want to do is basically sort of ensure that we're as quick, we're as efficient as you can within that inner loop. Once we have a great understanding in terms of the task ahead of us, once we have such a kind of full context, we can really sort of, we understand the tech stack that perhaps dealing with at that point in time, we can be kind of very efficient, very productive. So we know exactly what we're doing. We can get away, we're in front of our ID and we can actually write our code, test it, iterate, and do it in a sort of a kind of very efficient manner. Obviously there are challenges in terms of, and I suppose the key challenges people face is essentially interruptions in terms of that flow where you have to sort of switch context. So obviously most organisations have you, we have sort of planned interruptions where we have meetings in terms of to update people on progress, but we may have interruptions in terms of people asking us questions, either members of our team asking us questions. And of course, there may be things we don't understand. We don't have full context. We don't have full understanding and we have to then go away and actually try and sort of fill in the gaps within our knowledge and in order to achieve the task we're looking at. And really it's in terms of, how can we actually minimise those interruptions so everybody sort of has context and sort of has that sort of kind of fast flow in terms of how they're writing software? So, you know, it's a cartoon that one of my colleagues pointed me out. So in terms of actually how we think about how we write software in terms of sort of talking about that in a flow. So, you know, obviously when we're writing software, we have some sort of blue-sky thinking.

3. Understanding and Searching Code

Short description:

We often spend a lot of time trying to understand our code before we can be productive. There's a huge demand to improve software solutions, but people spend 75% of their time trying to understand code. To help with this, we have a universal search platform that allows developers to search across all their code and get a better understanding of how things are implemented and used. We can use simple queries to find information about specific libraries or functions. This is especially useful for React developers.

We're thinking about how best to write this method, what this class is gonna look like, how can it encapsulate, how can we make our code easier to read, easier to change for example. And that's great. But the reality is often actually we spend a lot of our time actually trying to understand what before we can actually actually be productive. And obviously that might be really basic stuff like trying to understand something about the language or tech stack you're involved in.

I mean, I can remember kind of fairly early on in my career, a real challenge, you know, one of probably my most stressful time I had was actually working on an options trading system. It wasn't a core part of our business, but every now and then I would be shipped off to a basement in Zurich or Frankfurt and I'd have to sit there on a Sunday trying to fix this trading system that had suffered some sort of failure and I had to get it working by Monday. The code itself was relatively complex, but actually the changes I had to make were very, very simple, but I could only make those very simple changes once I had a full understanding in terms of what was causing this problem. So, you know, I spent my time trying to sort of understand that code base so I could actually make a small change to actually get the system up and running.

And that's essentially the reality for many of us. You know, we live in an age of software, essentially everything is driven by software in some way. Therefore, there's a huge demand to actually iterate and improve our software solutions, which you know, leads to basically there's obviously a lot more code out there than there used to be. We have many more developers and there's a sort of additional complexity. And in terms of if you look at the studies from people like Microsoft, this one's actually from Stack Overflow, in terms of from a development perspective, people spend 75% of time trying to understand their code rather than actually writing the code. So again, really what we ideally wanna do is actually sort of kind of change those metrics so we can actually get up and actually kind of write code more effectively.

So how can we help people understand their code more easily? Well, this is essentially from a source crop perspective, kind of essentially our goal. How can we help people get context, get understanding more quickly so they can spend more time actually writing code? So how do we do that? Well, essentially what we do is we have a universal search platform. And essentially what that allows our customers to do, our developers that are using this platform is allows them to actually search across all of their code. So all of their repos kind of regardless, actually, from what code host in terms they're using for source control, but their front end repos, their backend repos, the different services that comprise their application, so they can actually get a better understanding of, help them answer questions, essentially. So how is this service implemented? How is someone using, who else is using this particular component? Who else is using this function or API call back to the backend? How do I use it? Helping people actually get that sort of more complete understanding in terms of, so they can actually sort of carry out their development, actually deliver actual application code.

So I'm just gonna dive into, give some sort of really simple examples of how we might use this platform. Now I'm not a React developer, but if I was, and so for me, what I can do with Sourcegraph, I can actually do some very simple queries. This system here we're looking at actually has about 2 million GitHub repos indexed on it. So 2 million public GitHub and GitLab repos. I know that Formic is a React library. So I can actually just do a very, very simple query to find out where that occurs within my code base. I can actually maybe do a slightly more complex query to actually see, actually a real query in terms of see where it's imported. So which code is actually important that library within my code. In this case, we're doing a very simple regular expression query to actually show where in that code that occurs. If you want us to dig down and actually see, look like a specific React functions, again, very simple queries, but again, immediately give me information about my code base in terms of where I might want to go to actually find information about how someone's actually used that function. Of course, from a React perspective, this is very basic.

4. Code Navigation and Automation

Short description:

We can navigate code and search across all repositories, even those outside our teams. Sourcegraph helps with code migrations, adhering to best practices, and automating changes across multiple repos. It allows developers to focus on higher value work and improve the efficiency of the inner loop. Visit sourcegraph.com to experience universal search across 2 million plus repos.

But of course, at that point, it allows me to actually then dig into the code. I can actually now start to look at the other sort of symbols that are defined within this code. So essentially now we're going from not just pure search, but also actually more towards sort of your actually capability you'd expect within your IDE in terms of code navigation.

The key difference here is that we're actually doing, providing sort of symbol navigation across all of your code, not just the repos that you have on your workstation, your laptop, that you're using within your IDE, but code that is, you know, perhaps lives outside of your teams or code that you don't need to touch very often. So again, it's allowing you access to that code both in terms of search, but also in terms of code navigation.

And in terms of React, we actually use React within Sourcegraph in terms of our UI. Actually one of the things we did about sort of six, probably eight, 12 months ago now, was actually change actually how we use React. So we were actually using class components rather than function components. So again, in this case, what I can actually do is search within, again, this is across all of these sort of 2 million repos, search across where we're using function components. But what we do with Sourcegraph is not just provide the search, not just provide the code navigation, but also allow us to use search to power other capabilities.

So in this particular example, we were migrating from one code pattern to another. So what we can also use search to do is actually show us how we're actually tracking, how we're actually monitoring that particular migration. So, a code pattern migration in this case. But it may be in terms of how we're actually adhering to best practice in terms of ensuring our code has relevant metadata. Or, how we're migrating from one library version to another across our code base. So, what we can do, because we have all the code, all the commit history that we can search and index, we can actually start to actually create time series views on that code base.

So, in this particular case, we're showing how the migration from our UI in terms of from our class component to a function component. So, essentially what this is giving us is basically a view in terms of our changing code base. And allows us, if we're sort of responsible for that particular initiative, allows us to actually perhaps make decisions. Is this going as fast as we want? If it's not, well, why is that? What actions can we take to actually change, or impact the rate of change for this particular initiative?

And finally, one of the other things we can use search for is actually to help us actually automate changes across our code base, across many, many repos. So, in this case, if we look at... In this case, what we're doing is we have a script, essentially. And we're essentially using that script to find out which repos we need to change. And then defining a set of steps to actually make those changes across all those code bases. So, automating change across multiple repos. And then allowing us to actually monitor how those changes are progressing through the relevant CI pipeline and review process.

The goal really is to allow, from a developer perspective, allow us to use a tool to help us actually allow us to focus on higher value work than perhaps more basic kind of code refactors that otherwise may not happen or may require us to actually liaise with many different teams in order to get them to sort of actually make those changes and then accept and review those changes. So, kind of a quick tour of the Sourcegraph platform.

So, I'd just like to sort of thank you for your time. So, again, from a Sourcegraph perspective, our goal is to help improve the efficiency of that inner loop. How can we help developers understand their code, get context, essentially get into flow, enable their colleagues to answer their own questions rather than coming to sort of interrupt you to ask questions about the code base. Love to you to actually go to sourcegraph.com to actually use universal search across 2 million plus repos. That includes many React repos or all the Facebook repos, for example that are public. Go on, try it out, see what impact that has in terms of your own development kind of lifecycle. And I just like to say, thank you very much for your time.

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

Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
Watch video: pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
pnpm is a fast and efficient package manager that gained popularity in 2021 and is used by big tech companies like Microsoft and TikTok. It has a unique isolated node module structure that prevents package conflicts and ensures each project only has access to its own dependencies. pnpm also offers superior monorepo support with its node module structure. It solves the disk space usage issue by using a content addressable storage, reducing disk space consumption. pnpm is incredibly fast due to its installation process and deterministic node module structure. It also allows file linking using hardlinks instead of symlinks.
How to Make a Web Game All by Yourself
JS GameDev Summit 2023JS GameDev Summit 2023
27 min
How to Make a Web Game All by Yourself
This talk guides you on how to make a web game by yourself, emphasizing the importance of focusing on tasks that interest you and outsourcing the rest. It suggests choosing a game engine that allows distribution on the web and aligns with your understanding and enjoyment. The talk also highlights the significance of finding fun in the creative process, managing scope, cutting features that don't align with the game's direction, and iterating to the finish line. It concludes by discussing the options for publishing the game on the web and leveraging unique web features.
Atomic Deployment for JS Hipsters
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
This Talk discusses atomic deployment for JavaScript and TypeScript, focusing on automated deployment processes, Git hooks, and using hard links to copy changes. The speaker demonstrates setting up a bare repository, configuring deployment variables, and using the post-receive hook to push changes to production. They also cover environment setup, branch configuration, and the build process. The Talk concludes with tips on real use cases, webhooks, and wrapping the deployment process.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
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.
Mastering advanced concepts in TypeScript
React Summit US 2023React Summit US 2023
132 min
Mastering advanced concepts in TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript is not just types and interfaces. Join this workshop to master more advanced features of TypeScript that will make your code bullet-proof. We will cover conditional types and infer notation, template strings and how to map over union types and object/array properties. Each topic will be demonstrated on a sample application that was written with basic types or no types at all and we will together improve the code so you get more familiar with each feature and can bring this new knowledge directly into your projects.
You will learn:- - What are conditional types and infer notation- What are template strings- How to map over union types and object/array properties.
From Todo App to B2B SaaS with Next.js and Clerk
React Summit US 2023React Summit US 2023
153 min
From Todo App to B2B SaaS with Next.js and Clerk
Top Content
WorkshopFree
Dev Agrawal
Dev Agrawal
If you’re like me, you probably have a million side-project ideas, some that could even make you money as a micro SaaS, or could turn out to be the next billion dollar startup. But how do you know which ones? How do you go from an idea into a functioning product that can be put into the hands of paying customers without quitting your job and sinking all of your time and investment into it? How can your solo side-projects compete with applications built by enormous teams and large enterprise companies?
Building rich SaaS products comes with technical challenges like infrastructure, scaling, availability, security, and complicated subsystems like auth and payments. This is why it’s often the already established tech giants who can reasonably build and operate products like that. However, a new generation of devtools are enabling us developers to easily build complete solutions that take advantage of the best cloud infrastructure available, and offer an experience that allows you to rapidly iterate on your ideas for a low cost of $0. They take all the technical challenges of building and operating software products away from you so that you only have to spend your time building the features that your users want, giving you a reasonable chance to compete against the market by staying incredibly agile and responsive to the needs of users.
In this 3 hour workshop you will start with a simple task management application built with React and Next.js and turn it into a scalable and fully functioning SaaS product by integrating a scalable database (PlanetScale), multi-tenant authentication (Clerk), and subscription based payments (Stripe). You will also learn how the principles of agile software development and domain driven design can help you build products quickly and cost-efficiently, and compete with existing solutions.
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
WorkshopFree
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
Building Pinia From Scratch
Vue.js Live 2024Vue.js Live 2024
70 min
Building Pinia From Scratch
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.
Mastering 3D Web Development with TresJS ecosystem: A Vue.js Workshop
Vue.js Live 2024Vue.js Live 2024
119 min
Mastering 3D Web Development with TresJS ecosystem: A Vue.js Workshop
Workshop
Alvaro Saburido
Alvaro Saburido
Introducing "Mastering 3D Web Development with TresJS," a specialized workshop crafted for Vue.js developers eager to explore the realm of 3D graphics within their web applications. TresJS, a powerful custom renderer for Vue, is specifically designed to work seamlessly with Vue's reactive system. This workshop offers a deep dive into integrating sophisticated 3D visualizations and interactive experiences directly into Vue applications, leveraging the unique strengths of both Vue and TresJS ecosystems.
This workshop is designed for Vue.js developers looking to expand their skill set into the third dimension, UI/UX designers interested in incorporating 3D elements into web applications, and front-end developers curious about the potential of 3D graphics in enhancing user experiences. You'll need to be familiar with Vue.js to benefit from this workshop fully.
What You Will Learn- Introduction to TresJS: Discover the fundamentals of TresJS and how it integrates with the Vue ecosystem to bring 3D graphics to life.- Creating 3D Scenes with Vue: Learn to construct intricate 3D scenes utilizing Vue components, enhancing your user interfaces with dynamic and immersive visuals.- Interactivity and Animation: Master the techniques to make your 3D scenes interactive, responding to user inputs for a captivating user experience.- Integrating with Vue Features: Explore advanced integration of TresJS with Vue’s reactivity, composables, and the Vuex store to manage state in 3D web applications.- Performance and Best Practices: Gain insights into optimizing your 3D scenes for performance and best practices to maintain smooth, responsive web applications.