Technically Included (The Best Kind of Included)

Rate this content
Bookmark
SlidesGithub

The design-development gap hurts your React projects: slower timelines, compromised quality, and repetitive handoffs. This talk explores the origins of this problem, the differences in language and environment, and offers solutions through processes, tools, and collaboration. Discover how including designers throughout the implementation process helps developers reduce friction, speed up

development, and deliver exceptional UIs.

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

FAQ

Incorporating other team members into your projects and code helps achieve better results and better UIs by leveraging cross-functional collaboration.

The speaker started as a web developer, helped found the Wix R&D Academy, organized community efforts and conferences, and led the development of Styliable IO. Currently, the speaker is the head DevRel for Codex.

Codex is a visual development environment designed to work alongside your existing IDE. It integrates with your local environment and supports React and TypeScript code.

Cross-functional teamwork is important because it brings together multiple personas from different aspects of the project, such as design, UX, product, business analysis, and testing, leading to a more holistic and efficient development process.

In the past, developers and designers faced challenges like browser compatibility, limited APIs, and gaps between design tools and web capabilities, which made it difficult to create feasible designs and maintain consistent cross-browser functionality.

Web development tools and processes have evolved with standardized browsers, package management, modern frameworks like React, and faster feature releases. Additionally, there has been a shift towards more collaborative tools and environments.

Staging environments allow stakeholders to access work-in-progress versions of the project, enabling earlier feedback and adjustments, which helps catch issues sooner and improve the final product.

Recommended tools include design systems like Open Props, Tailwind CSS, and Fluent by Microsoft, which help create a shared language and reduce miscommunication between developers and designers.

Designers can be integrated into Agile processes by involving them in sprints, encouraging them to open pull requests, and treating them as partners working towards the same objectives.

Behavior-driven development helps close the communication gap by providing a structured way to define and test the expected behaviors of the application, which can improve understanding and collaboration between team members.

Tom Raviv
Tom Raviv
30 min
14 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Being technically included leads to better results and UIs. Incorporating multiple team members comes with challenges and compromises. The evolution of tools and technologies has standardized industry practices. Closing the gap between developers and designers requires collaboration and a common source of truth. Embracing change and building trust can improve collaboration between developers and designers.

1. Introduction to Being Technically Included

Short description:

I'm going to talk about being technically included and what that means, how incorporating other team members into your projects leads to better results and UIs. I have over a decade of experience at Wix and have been involved in various community efforts and open source projects. I'm currently the head devrel for Codex, a visual development environment that integrates with your local environment. Working in cross-functional teams is the best way to achieve success.

Hello there, everyone. I am so happy to be here. Thank you for joining me in the illustrious 4.20 time slot here in Amsterdam. I'm going to be talking about being technically included and what that means, how by incorporating other team members into your projects, into your code, you're going to be able to reach better results, better UIs.

So just a quick word about me. As mentioned, over a decade at Wix feels like I found my tribe. I started off as a web developer, did that for a couple of years, then moved on to help found the Wix R&D Academy dealing with internal trainings, but also with building the engineering brand for Wix where I got involved with a lot of community efforts, a lot of open source, and helped organize You Gotta Love FrontEnd, a major conference back home. After that I found myself missing the code just a little bit so I came back to that side of things, helped lead styliable IO, our own open source CSS preprocessor. I would love to talk to you about that at another time.

These days I'm the head devrel for Codex, which is our mandatory plug for this part of the discussion. Here you can see Codex is a visual development environment. It is an application you download and install just like any other IDE but it is meant to run on your React and TypeScript code. It fully integrates into your local environment and is not meant to replace your IDE but rather work side by side with it. If you scan the QR code, you'll find the demos that I'll be running later on, the presentation, as well as all the links to all the Codex stuff. But all this is just to say that I really love building things, and I really love the web. The openness of it, the inclusivity, the ease of getting to visual results, and the best way that I found to work in that regard is to work in cross-functional teams. Working in small tight knit units that involve multiple personas from different aspects of the project, representing the design, the UX, the product, the business, analysts, testing, and so on.

2. Challenges of Incorporating Multiple Team Members

Short description:

Incorporating multiple team members comes with challenges and the constant need for synchronization. Time constraints often lead to compromises, and designers' efforts may not always meet their expectations in production.

But it's not that that goes without any sort of challenges or struggles, right? When you're incorporating that many people, you're facing that constant need to sync things. There are handoffs and meetings and documents and specifications. And as you're kind of going, you end up reaching the state of this endless back and forth of implementation, review, and fixes. And you keep doing that over and over again with your designers, with your product managers, to make sure that things are aligned correctly. But eventually, usually, time runs out, right? And the compromises start to happen. To steal a joke from our designer friends, this is kind of how they feel about it sometimes, right? They put all that effort into creating a bespoke experience, a bespoke design, and in production, their expectations are being let down. But I think it wasn't always like that.

QnA

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

Less Cruft, More Power: Leverage the Power of the Web Platform
C3 Dev Festival 2024C3 Dev Festival 2024
30 min
Less Cruft, More Power: Leverage the Power of the Web Platform
This talk focuses on the powerful features of CSS and HTML that can level up developer skills and enhance web UI. Scroll-driven animations, popover API, and anchor positioning are explored as ways to create dynamic effects, improve performance, and increase accessibility. The talk also emphasizes the benefits of building presentations with CSS and HTML, separating logic from styling, and leveraging core platform features. Wishlist features for the web platform and the challenges of pushing updates across browsers are discussed.
JS on the Big Screen: Making TV Apps
JSNation 2024JSNation 2024
22 min
JS on the Big Screen: Making TV Apps
JavaScript is widely used in web, mobile, and backend development, and now it is also being used to create TV apps. TVs with web-based operating systems can be targeted with JavaScript applications, and React is commonly used for TV app development. React Native allows for cross-platform TV app development, except for Roku. User interactions and focus management are important considerations in TV app development. Performance optimization is crucial for TV apps, as TVs have lower device scores and limited RAM. Spatial virtualization can significantly improve TV app performance.
Canva’s App UI Kit: Empowering Developers With Modern Web Technologies
React Summit US 2023React Summit US 2023
8 min
Canva’s App UI Kit: Empowering Developers With Modern Web Technologies
Watch video: Canva’s App UI Kit: Empowering Developers With Modern Web Technologies
Welcome to the Canva Tech talk where the Canva tech stack, React component structure, and UI kit for developers are discussed. Canva uses Java, Go, Bash, TypeScript, and React for development. TypeScript, MobX, and React were chosen to enable hundreds of developers to work on the code base productively. Canva's internal component library was explored and released under a semi-open source license, allowing for quick delivery and sharing of improvements with the community. The developer community has added numerous app integrations accessible to Canva's 150 million monthly active users.
Ship Your UI Faster With Turborepo
DevOps.js Conf 2024DevOps.js Conf 2024
21 min
Ship Your UI Faster With Turborepo
The Turboverse focuses on making the development process faster and more efficient. TurboPak is an incremental bundler with function-level caching, and TurboRepo is a high-performance build system with features like incremental building, remote caching, and parallel execution. TurboRepo can optimize task runners, set up monorepos, and speed up development time. vclink-repo enables seamless integration with the Vercel remote cache, and Conformance and Codoners provide static analysis and automated code reviews. TurboPak and TurboRepo offer faster CI processes and exciting advancements in web bundling.
Nested Interactive Elements: A Nightmare in Accessibility
React Summit 2024React Summit 2024
9 min
Nested Interactive Elements: A Nightmare in Accessibility
Nested Interactive Elements in Nightmare Accessibility can cause issues with screen readers and other assistive tools, making it difficult for users to interact with websites. Mitigation strategies include unnesting elements, using CSS overlay, and being cautious when modifying roles. It is recommended to involve users of assistive tools in focus groups and share solutions online.