English versionEN

[EN] Build React-like apps for internal tooling 10x faster with Retool
[ES] Construye aplicaciones similares a React para herramientas internas 10 veces más rápido con Retool

Build React-like apps for internal tooling 10x faster with Retool

Chris Smith

Retool

Recording and certification are available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

Bookmark

Most businesses have to build custom software and bespoke interfaces to their data in order to power internal processes like user trial extensions, refunds, inventory management, user administration, etc. These applications have unique requirements and often, solving the problem quickly is more important than appearance. Retool makes it easy for js developers to rapidly build React-like apps for internal tools using prebuilt API and database interfaces as well as reusable UI components. In this workshop, we’ll walk through how some of the fastest growing businesses are doing internal tooling and build out some simple apps to explain how Retool works off of your existing JavaScript and ReactJS knowledge to enable rapid tool building.

Prerequisites:

A free Retool.com trial account

Some minimal JavaScript and SQL/NoSQL database experience

Retool useful link: https://docs.retool.com/docs

This workshop has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Retool is a platform designed to help engineers create valuable software quickly, often in the form of internal tools. It was created to address the need for rapid development of internal tools, which are crucial for automating and enhancing operational tasks within organizations. Retool features a drag-and-drop interface, pre-built API and database connectors, and the ability to write JavaScript or SQL across the app, which collectively save a significant amount of development time.

Common types of internal tools built with Retool include admin panels, CRUD (Create, Read, Update, Delete) interfaces, and custom internal apps. These tools are typically used for tasks like revenue forecasting, contract renewals, managing cohorts and vendors, customer support, and inventory management.

Yes, Retool can connect to external databases and APIs. It provides various pre-built connectors for databases and API-based services, allowing users to easily integrate and manipulate external data sources within their internal tools.

JavaScript can be used extensively within Retool applications to add functionality and logic. Users can write JavaScript directly in the app, use it to manipulate data, handle events, and interact with UI components. Retool also allows for importing external JavaScript libraries to extend the functionality of the tools being built.

Yes, Retool allows users to create their own custom React components, or modules, which can be reused across different parts of their applications. This feature enables developers to build highly customized and complex internal tools tailored to specific business needs.

Retool supports basic responsiveness out of the box and allows developers to customize the styling of their applications using CSS. Users can modify the look and feel of their internal tools to match company branding or to improve usability.

Yes, Retool applications can be deployed internally within an organization. Users can choose to run Retool on-premise, using their own infrastructure, which ensures that all data and interactions remain within the company's private network.

tool building retool react

Chris Smith

86 min

16 Jun, 2021

Comments

Video Summary and Transcription

Today's Workshop covered the challenges of building internal tools and introduced Retool, a tool that helps engineers create valuable software quickly. Retool eliminates the need for boilerplate code and allows for practical and functional designs. It offers a drag-and-drop interface, pre-built API and database connectors, and the ability to write JavaScript or SQL. The Workshop also covered topics such as building apps, customizing components, uploading CSV files, editing and updating records, adding delete functionality, connecting to APIs, building interfaces, and setting permissions and customization options.

Available in Español: Construye aplicaciones similares a React para herramientas internas 10 veces más rápido con Retool

Video transcription and chapters available for users with access.

Available in other languages:

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

Rethinking Bundling Strategies

React Day Berlin 2023

32 min

Rethinking Bundling Strategies

Watch video: Rethinking Bundling Strategies

Tobias Koppers

Webpack and Turbopack Creator

The talk discusses rethinking bundling strategies, focusing on challenges such as long-term caching and improving the state of Next.js and Webpack. It explores handling immutable caching and content hashes, optimizing asset references and page manifests, and addressing issues with client-side navigation and long-term caching. The talk also covers tree shaking and optimization, optimizing module fragments and code placement, and the usage and relationship of TurboPack with Webpack. Additionally, it touches on customizing configuration and hash risks, barrel imports and code splitting, and entry points and chunking heuristics.

tool building

Building Figma’s Widget Code Generator

React Advanced 2022

19 min

Building Figma’s Widget Code Generator

Jenny Lea

Figma

This Talk introduces Figma's Widget Code Generator and demonstrates how to build a FigJam widget using it. The speaker discusses the implementation of voting functionality, avatar functionality, and remove vote functionality. They also explain how the Widget Code Generator plugin works and how to access properties and modify names using the Figma plugin API.

case study devtools tool building design

Start Building Your Own JavaScript Tools

JSNation 2023

22 min

Start Building Your Own JavaScript Tools

Will Klein

Independent Developer

[♪ music ♪ by The Illuminati plays)] I see a common thread across any project I work on. Different developers are making the same mistake and we have preferred ways of doing things. Preventing mistakes and sharing best practices are great reasons to look at tools like linters and in particular ESLint. Let's write our first rule together. We're just scratching the surface of building our own tools, which can have a massive impact on improving the developer experience.

build tools tooling tool building

Advanced linting rules with ESLint

TypeScript Congress 2023

10 min

Advanced linting rules with ESLint

Tibor Blenessy

SonarSource

Tibor Blanesy from Sonar presents advanced techniques for linting with ESLint, including the use of ControlFlowGraph to detect errors in code. The algorithm is based on liveness analysis, which identifies live variables at any point in the program. Additionally, the talk covers the computation of block sets using the difference between outset and kill set unionized with genset.

advanced devtools tool building

How not(!) to Build Real-time Apps

Node Congress 2024

10 min

How not(!) to Build Real-time Apps

Nikolas Burk

Prisma

Today's Talk discusses different approaches for implementing real-time updates in server-side applications, including application-level updates and polling. The drawbacks of polling include inefficiency and complexity at scale. Adding extra infrastructure, like messaging systems, can ensure scalability but introduces operational overhead. Prisma Pulse is a system that simplifies change data capture, providing an easy setup for subscribing to database changes and solving scalability issues.

tool building web apps

Building a Network Stack for our Browser Extension

Node Congress 2024

19 min

Building a Network Stack for our Browser Extension

Cyrus Roshan

Jam.dev

The Talk discusses the development of the Jam browser extension, which is a bug reporting tool. It explores the challenges of messaging between different execution environments within a browser and the need for message chunking to overcome size constraints. The Talk also explains how the development team rebuilt the system using a TCP/IP network stack approach, which allowed them to solve messaging difficulties similar to networking problems. The benefits of this approach include a smoother rollout, simpler debugging, and a focus on feature development without worrying about messaging constraints.

tool building browser api