Understand Your Codebase to Innovate Faster

Rate this content
Bookmark

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.

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 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.
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.
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
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.
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
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.
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.