TNS
VOXPOP
As a JavaScript developer, what non-React tools do you use most often?
Angular
0%
Astro
0%
Svelte
0%
Vue.js
0%
Other
0%
I only use React
0%
I don't use JavaScript
0%
AI / Frontend Development / JavaScript / TypeScript

Is React Now a Full Stack Framework? And Other Dev News

This week we look at React theories, how Claude generates artifacts for developers, the latest TypeScript release, and Project IDX.
Aug 31st, 2024 5:00am by
Featued image for: Is React Now a Full Stack Framework? And Other Dev News

Maybe we’re not so much living in a post-React world as we are living with a new React paradigm: React is becoming a full stack framework with the addition of React Server Components and Server Actions, software engineer and freelance developer Robin Wieruch argued recently.

“This marks just the beginning of full-stack development with React,” Wieruch wrote. “As developers start to access databases directly through Server Components and Server Actions, there will be a learning curve ahead to tame the complexities beyond simple CRUD applications.”

This will allow frontend developers to quickly master implementing backend architectures with layers, design patterns and best practices, Wieruch added.

Claude Can Now Generate Artifacts

Artifacts give Claude AI users a dedicated window to see, iterate and build on any work created in Claude. For developers, this provides a separate window to see code or to make architecture diagrams from codebases, according to the Claude team.

“Artifacts turn conversations with Claude into a more creative and collaborative experience,” the Claude blog stated. “With Artifacts, you have a dedicated window to instantly see, iterate, and build on the work you create with Claude.”

A screenshot of Claude showing the Artifacts interface with Python code.

Screenshot via Claude.ai

Artifacts are now available for all Claude.ai users across the platform’s Free, Pro, and Team plans. Artifacts can also be created and viewed on Claude’s iOS and Android models. It can also create:

  • Code snippets
  • Flowcharts
  • SVG graphics
  • Websites in single page React or HTML
  • Interactive dashboards
  • Insert image

The Anthropic post includes a video that describes how this feature was created and explores other use cases outside development, but for a deeper read on how it can be used to build web applications, check out this post by Pragmatic Engineer, which explores in-depth the capabilities and creation of Artifacts.

“While the feature is small, it feels like it could a leap in using LLMs for collaborative work — as every Artifact can be shared, used by others, and remixed,” explained Gergely Orosz, who writes Pragmatic Engineer.

Catching More Bugs With TypeScript

The release candidate for TypeScript 5.6 is out, and Microsoft TypeScript Product Manager Daniel Rosenwasser offered a roundup of what’s new, including disallowed nullish and truthy checks for catching more bugs. Rosenwasser lists several examples of code that do not do what the author intended, but are still valid JavaScript code. Previously, TypeScript would just accept these examples, he wrote. No more.

“But with a little bit of experimentation, we found that many many bugs could be caught from flagging down suspicious examples like above,” he wrote. “In TypeScript 5.6, the compiler now errors when it can syntactically determine a truthy or nullish check will always evaluate in a specific way.”

“But with a little bit of experimentation, we found that many many bugs could be caught from flagging down suspicious examples like above.”
— Daniel Rosenwasser, Microsoft TypeScript Product Manager

TypeScript 5.6 also introduces a new type called IteratorObject and the post provides code examples of how it’s defined.

Rosenwasser writes that there is an AsyncIteratorObject type for parity.

“AsyncIterator does not yet exist as a runtime value in JavaScript that brings the same methods for AsyncIterables, but it is an active proposal and this new type prepares for it,” he explained.

Project IDX Combines Code Editor With Languages and Tools

Project IDX is a browser-based development experience built on Google Cloud Workstations and powered by Codey, a foundational AI model trained on code and built on PaLM 2. Its goal is to make it easier to build, manage and deploy full-stack web and multiplatform applications, with popular frameworks and languages.

Project IDX seeks to unify the two main parts of a development environment: The code editor and the languages and tools required to build and run the code, the team noted in a recent reflection on developing Project IDX over past year.

“At the heart of Project IDX is our conviction that you should be able to develop from anywhere, on any device, with the full fidelity of local development,” The Project IDX team wrote in introducing it last year. “Every Project IDX workspace has the full capabilities of a Linux-based VM, paired with the universal access that comes with being hosted in the cloud, in a data center near you.”

This yearly update noted the Project IDX team had three areas of focus:

The team has integrated generative AI features, provided by Gemini, into the code.

“These provide context-aware code suggestions, unit test generation, comment writing, programming language conversions, and technical question answering — all without ever leaving your workflow,” the post noted. “On the development environment side, we’ve built a robust system based on Nix, allowing for effortless environment configurations. With minimal setup, you can customize your Project IDX workspace with the precise languages, tools, and extensions you need to hit the ground running.”

Nix is a functional package manager that assigns unique identifiers to each dependency, which ultimately means an environment can contain multiple versions of the same dependency, seamlessly, the post added.

Group Created with Sketch.
TNS owner Insight Partners is an investor in: Redefine.
TNS DAILY NEWSLETTER Receive a free roundup of the most recent TNS articles in your inbox each day.