React Summit US

React Summit US 2023

The Talk discusses the journey of improving React and React Native documentation, including the addition of interactive code sandboxes and visual content. The focus was on creating a more accessible and engaging learning experience for developers. The Talk also emphasizes the importance of building a human API through well-designed documentation. It provides tips for building effective documentation sites and highlights the benefits of contributing to open source projects. The potential impact of AI on React development is mentioned, with the recognition that human engineers are still essential.

A behind the scenes look at the design and development of the all-new React docs at react.dev. The new react.dev launched this year introducing new methodologies like challenges and interactive sandboxes and subtle inclusivity features, like "international tone" and culturally agnostic examples. Not only have the new docs changed how people learn React, they've inspired how we think about developer education as a community. In this talk, you will learn how the React team and some ambitious community members made the "React docs rock" for a generation of front end developers and how these new patterns and established techniques can be applied in your favorite projects.

Gateway to React: The React.dev Story

Rachel Nabors

JS Nation

JSNation 2022

The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.

Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.

Full Stack Documentation

Rich Harris

React Finland

React Finland 2021

Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Opensource Documentation—Tales from React and React Native

React Advanced

React Advanced 2024

Hi, I'm Mark Erickson, and today I'm very happy to talk to you about designing effective documentation, lessons I've learned writing the Redux docs. We'll discuss organizational techniques, practical tips, writing tutorials, and useful documentation tools. Redux offers learning-oriented tutorials and goal-oriented how-to guides. Other documentation categories include reference guides, explanations, readme files, FAQ pages, and release notes. Tips for organizing and writing documentation: consider the target reader, assume prerequisite knowledge, repeat information, cover topics in multiple areas. Writing tutorials for libraries in TypeScript presents challenges but can be tackled with TypeScript-first approach and keeping examples up-to-date. Engaging tutorials involve interactive exercises, diagrams, and formatting, and should be reviewed and improved based on feedback. Overall, documentation is valuable and worth the effort.

You've just finished building a brand-new blazing fast JS library and can't wait to publish it to NPM. But hold on a minute - what about the docs? Sure, anyone can slap together a README with some example code snippets, but have you actually thought about how to actually design the docs themselves?Join Redux maintainer Mark Erikson as we look at ways to effectively structure and write documentation to help your users learn and understand how to use your tools, based on years of experience building the Redux docs.  We'll talk about patterns for organizing categories of documentation, tips for making the docs easier to read and understand, useful tools for working with docs content, and more!

Designing Effective Documentation: Lessons Learned Building the Redux Docs

Mark Erikson

DevOps.js

DevOps.js Conf 2024

This Talk discusses the story of continuous improvement in software development. It emphasizes the importance of measuring software delivery performance using metrics such as lead time, deployment frequency, change fail rate, and time to restore. Code reviews play a significant role in improving software delivery, and exploring the potential impact of AI on code reviews is recommended. Focusing on documentation and proper utilization of the cloud can improve organizational performance. Finally, a good culture, user focus, and collaborative platform team are crucial for success in software development.

For nearly a decade, the DevOps Research and Assessment (DORA) project has studied the behaviors of thousands of software development teams and discovered the key capabilities that reliably predict success. DORA has consistently found that not only do top performers lead their industries in both release velocity and service reliability, they achieve better business outcomes and have more satisfied employees.In this session, we’ll unpack the research findings and outline key steps your team can take toward continuous improvement.We will couple these findings with stories "from the field" about how teams are putting these ideas into practice.

State of DevOps - A Continuous Improvement Story

Amanda Lewis

Nathen Harvey

React Day Berlin

React Day Berlin 2023

Good documentation is crucial and can make or break a project. Word of mouth is important in the industry, and great documentation can attract users. MDX is a powerful tool for writing documentation, allowing for customization and reuse of components. Documentation should be treated like code, with testing and continuous improvement. Responsible AI usage is important, and a balanced approach to documentation, including inline comments and different formats, should be used.

Documentation is essential to any project and it can really "make it or break it".  However documentation is time consuming to draft and can sometimes be forgotten, or updates and amendments to it left behind as the project moves forward.  Additionally, creating your documentation with Markdown has its limitations, so you may not end up with the result you want or that your contributor needs.  By using MDX you can combine Markdown with code and integrate it into your React project.  Documentation becomes a more streamlined and efficient process and dare I say it...fun.

How MDX is a game changer for your React Project's Documentation

Eddie Jaoude

This Talk discusses the challenges and collaboration involved in building Nodebox, a Node.js compatible runtime for the browser. It provides an overview of how Nodebooks works, including the main manager, previews, and web workers. The Talk also covers the simplicity and speed of reading from the filesystem in Nodebooks. It highlights the complexity of implementing HTTP support and WebSocket mocking in Nodebox. Lastly, it mentions the ability to build a web server using Nodebox and provides information on available templates.

We'll walk through what it takes to build a Node.js runtime for the browser, the challenges we discovered along the way and solutions we built to those challenges.

Building a Node.js Runtime for the Browser

Jasper De Moor

React Advanced 2023

This talk emphasizes the importance of writing technical documentation and provides tips for improving it. Technical documents help explain intentions, reasoning, and choices, reducing work volume and aiding troubleshooting. Writing technical documents is important for visibility, career progression, and communication with managers. Integrating documentation into the development tool chain and treating it like tests ensures its quality and keeps it up to date. Structuring technical documentation effectively and providing concise and clear information are key for boosting its usefulness.

Gathering pieces of information for a task or a project is a wasteful act and could result in duplicated work done by different people.Onboarding, your ability to maintain code or infrastructure and systems handover - Documentation plays a crucial part in all these processes.So... how can we write technical docs in an easy way &amp; why should we even do it? In this talk, I’ll show you a structured way to write technical docs, without being a technical writer - So you will deliver highly valuable information to your audience, to your best ability.I’ll explain why should you care about these docs, how do they serve your best interests (Yes, there’s more than one!) and what a wide impact it could make on employees and even on your entire organization.

Technical Documentation - How Can I Write Them Better and Why Should I Care?

Hila Fish

TS Congress

TypeScript Congress 2022

TypeScript for library authors offers benefits for both internal and external use, improving code quality and providing accurate understanding of libraries. Documentation and examples should be in code to provide up-to-date information. Testing types alongside unit tests ensures accurate typing. Managing changes and exposing types requires careful versioning. Deep integration of types improves usability. Using a map in TypeScript allows for simpler implementation and customization. Leveraging types in libraries can generate code based on user access. TypeScript integration with Nuxt provides support and type declarations.

Using real-life open-source examples, we'll explore the power of TypeScript to improve your users' experience. We'll cover best practices for library authors, as well as tips and tricks for how to take a library to the next level. This talk will cover:  - how to leverage the type inference to provide help to your users; - using types to reduce the need and complexity of your documentation - for example, using function overloads, string literal types, and helper (no-op) functions; - setting up testing to ensure your library works (and your types do too!) with tools like tsd and expect-type; - treating types as an API and reducing breaking changes whilst shipping enhancements; - I'd draw on my experience with libraries like nuxt3, sanity-typed-queries and typed-vuex and show what we managed to do and what I'd do differently in future.

TypeScript for Library Authors: Harnessing the Power of TypeScript for DX

Daniel Roe

React Advanced 2021

Welcome to this session about documentation in a command-driven era. The Data Axis framework provides a comprehensive approach to documentation, covering different areas of the development process. Component-driven development and MDX syntax enable faster development, simpler maintenance, and better reusability. Embedding components in Markdown using MDX allows for more advanced and useful documentation creation. Tools like Storybook and Duxy with MDX support are recommended for documentation solutions. Embedding documentation directly within components and migrating to MDX offer a comprehensive documentation experience and open up new possibilities for embedding and improving documentation.

"In Space, No One Can Hear You Scream." The same goes for your super-brand-new-revolutionary project: Documentation is the key to get people speaking about it.Building well-fitted documentation can be tricky. Having it updated each time you release a new feature had to be a challenging part of your adventure. We tried many things to prevent the gap between doc and code: code-generated documentation, live examples a-la-Storybook, REPL...It's time for a new era of documentation where people-oriented content lives along with code examples: this talk will guide you from Documentation Best Practices – covered from years of FOSS collaborative documentation – to the new fancy world of Components in Markdown: MDX, MDJS, MD Vite, and all.Let's build shiny documentation for brilliant people! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Legendary Fountain of Truth: Componentize Your Documentation!

m4dz 

Rachel Neighbors discusses the importance of documentation as a second source of truth for developers. She shares insights from improving the React Native documentation, including the need for refresher material, visual content, and interactive examples. Neighbors emphasizes the power of documentation in empowering communities to build reliable content and highlights the React documentation as a successful example. She invites feedback on the latest iteration of the React documentation.

Your Second Source of Truth

I'll present a practical approach to styling react components, a folder structure and documentation structure that's very easy to follow (for onboarding members) + other insights I got while using this approach. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to structure, style and document your components for maximum effectiveness

Dragos Bilaniuc

Most documentation systems focus on text content of one form or another: WYSIWYG editors, markdown, code comments, and so forth. Storybook, the industry-standard component workshop, takes a very different approach, focusing instead on component examples, or stories. In this demo, I will introduce an open format called Component Story Format (CSF). I will show how CSF can be used used to create interactive docs in Storybook, including auto-generated DocsPage and freeform MDX documentation. Storybook Docs is a convenient way to build a living production design system. I will then show how CSF stories can be used create novel forms of documentation, such as multiplayer collaborative docs, interactive design prototypes, and even behavioral documentation via tests. Finally, I will present the current status and outline a roadmap of improvements that are on their way in the coming months. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Documenting components with stories

Michael Shilman

In this talk, Patrick goes through the effort that went into ReScript's documentation platform. You can check the slides for this talk <a href="https://drive.google.com/file/d/1Nc9m2BpEvzcgUBhDFn48e5xGMQN8iGmm/view" target="_blank">here</a>. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Story of ReScript's Documentation Platform

Patrick Ecker

React Summit

React Summit 2020

This Talk discusses how Gatsby and MDX can improve component library documentation. The speaker shares their experience with a previous design system and the challenges they faced with documentation. They explain how Gatsby was chosen as a solution and the benefits it provided. The use of MDX is highlighted as a way to enhance component documentation. The addition of editable code blocks is also mentioned as a means to make the documentation more interactive and intuitive.

Is your complex documentation setup a maintenance nightmare and chasing away potential contributors? In this talk, you will learn how to make your React component library documentation more user and contributor-friendly with Gats and MDX. Pair this with accessibility best practices, and your documentation will be inclusively smooth. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#documentation