From Idea to Production: React Development with a Visual Twist

So, hi everyone. Super nice to be here. Starting with a quick introduction. I'm Omer, I lead the product of Codex from core three team. We're a cool team in Wix. I'll tell you a bit about in a second. Joined Wix over four years ago. Been working on Codex product more or less the whole time. Previously cofounded Rapid UI, which is a product that was in the very similar areas of Codex of front end tooling, working visually with code but still writing code at the same time. You'll see it in a second. More than eight years around front end tooling and coding through visual experiences.

Here with me today are some of our awesome team members of Core 3 to help around during the hands‑on session. Our company is working mainly ‑‑ our team is working mainly on developer toolings, tools for developing teams. We're a very technical team in Wix. And so does our products. We have two main products. One of them is Stylable. It's an open source CSS preprocessor. We're going to tell you a bit about it today. And CodeX, which is what we're here to talk about. You can see that we have someone joining us.

A bit about Wix. For those who don't know, Wix was founded in 2006 to make it possible for everyone to succeed online. Started with like just create a visual presence and later on added many ways to manage business and create whatever you need basically to have an online presence. Industry leaders in web creation and business management. 230 million users worldwide and we're spread around 17 countries. So we'll be showing you the brand new offering of Wix for development teams.

So today's goals, we're going to introduce CodeX and our visual approach for frontend. You're going to install the product. You're going to learn how to use it and hopefully enjoy doing it. We really appreciate your feedback.

We'd love to hear whatever you have to say. And of course, we'd be happy to help you implement CodeX for your team and your needs if you're interested in at the end.

So this is what we're going to do today. We're going to start with a quick intro about the CodeX vision and what are we doing. I'm going to do a quick demo, show you how the product works, give you an option to ask questions. We'll be here answering. And we're going to take a few minutes break, come back and start doing real hands-on challenge at the end.

If you'll be interested, we can tell you a bit more about how we build CodeX. A bit about under the hood.

So, let's understand the playing field. The development process as we know it today and I'm going to start with a bit of intro to why we're building what we're building. So, we're all here working on front-end, right? Most of us are creating visual outputs for whatever we need to do. And usually we need to collaborate. We're working with multiple personas to deliver at the end of the day, something visual for our users.

So, it usually starts with a product need. Right? Something that we need to build. A business need or a product request. Something that we know that we need to build. Usually starts with the product manager or the product persona in the team that is in charge of like kind of figuring out that we need to build this thing.

Later on in the process, once we figure out what we need to build, usually we start playing around with how do we want it to behave, how do we want it to look like. This is where the design comes in. Right? We have the product requests and later on comes the design, kind of trying to figure it out hopefully or ideally together. Cracking it out. Usually in separated environments they have separated kind of concerns during their work. And this is the point in time where the design tool comes in.

And, of course, what we all know and love, step number three, we have to actually make the thing. So we have the product need and we kind of figure it out together, we start designing it, we crack the concept. But at the end of the day we need to actually make it work. We need it to run in real environments, write real code. So that's usually environment number three, our IDEs where we manage our code.

So usually that would be the common flow kind of step thing, multiple personas working in multiple environments that usually are separated from one another, usually each with their own way of working. Now, it's not only that, that we need to work with separated environments. We face some issues and some pain points that I'm sure that you can all relate to.

So it starts with finding our feet, right? So it's not only our project, right? Usually it's not something that we start from scratch. And even if it's our project that we start we always need to come back and maintain. And understanding the code that we're trying to write into can be complex, right? What does this thing do? How should I change it? Am I changing the right thing? Where should I change the thing to make it work as I need? What does it do? We commonly find ourselves playing around with DevTools, drawing these red rectangles, trying to kind of pinpoint the dome element that we need to target in order to actually make the change. So it's very challenging to get into an existing code base or even to our code base that we wrote some time ago and knowing what do we need to do and where.

No, it's not only that, right? We have our project structure, we have the ways the way files should be, should be kind of aligned. We have our own team conventions. We have the way that we want folders to be structured, and all of that. So finding your fit can be more challenging than it seems.

Now, it's not only that. We want to stay confident and we want to move fast. Things that we find ourselves doing, wanting to make the change, even if we do already know what we wanted to do, right? We got the design request and we know where do we need to change it in the code base, but how do we do it? Do we know all the time, what do we need to change and where and how do we do it? So in these two examples I'm kind of trying to represent these cases where we always have to rely on this other tool. A fourth environment. Something that will help us figure out how to implement the right thing properly. Many times for visual things we find ourselves working with visual tools to help us make sure that we're getting into the right output.

Now the last thing that we care about is to stay safe. We want to make sure that we didn't really change something that we didn't want to or that we managed to cover all of the cases. Changing something. How do I know that I get all of the cases covered? What we see here is Android's spread of different devices that was 2015 I think so you can just imagine how it evolved since. And it's not only a matter of screens. Did I affect something that I wasn't meant to? Do I have the proper validation that I didn't really change something that was not meant to? Do I have a reflection that the change that was made was made all across my designs. And of course to help others work with my code and to stay safe when they join my workflow I need to help them right. So I'm either creating this documentation pages or even from the Linux side creating this API documentation to make sure that people can interact with the codebase the way that we want to.

So kind of revisiting what we just talked about. Understanding the code would be the first thing. What should I do? Where should I implement it? How should I implement? What do I actually need to change and how do I stay effective? How do I make sure that I'm doing it the fastest possible? And last, how can I confirm that I didn't change something I didn't want to? That I have everything that I need covered? So with that, please allow me to introduce Codex. So Codex is a visual IDE for React. Now when we say IDE, we mean it.

It is an integrated development environment. It has all of these capabilities that you know, you can write code freely, you can manage scripts, you can manage Git, all of that. But on top of all of that, we have our very own visual approach to managing front end, things that at the end of the day should be visual.

In Codex, the code is the only source of truth. There is no translations, there is no dirty or intermediate code to translate what you're doing. You're just editing React and TypeScript code and of course the styling that you're using. There's nothing in between. You develop components in isolation, but at the same time you can run the full application, run the full pages.

We work visually, right? We have our visual approach to manage front end, but you can always see changes reflected in code in real time. So that kind of comes back to the first points. We edit code and nothing else. We directly edit your React, TypeScript, and styling code. That means that you can keep your IDE. You can still work the way you're used to in your IDE alongside Codex if you want to. You work locally on the files on your machine and you can deploy it wherever you want. This is your code at the end of the day. We're just an editing environment that runs your code and helps you along the way.

Now in terms of complexity, so components, and the environment could be as simple or as complex as you need that to be. At the end of the day, it's your code. And we can just help you run it the way you want it to run. Our supported stack, we're working with React components written in TypeScript. We relied heavily on TypeScript to help you working with component properties. You're gonna see it during the demo. You can bring your own third party libraries when you're working with Codex. Again, it's your code, your project. And you can use all these four styling solutions that we support. CSS and CSS with CSS modules, Sass and Sass models, Styleable, which is our in house styling solution. We're gonna tell you a bit more about it at the end if you'd be interested. We're using it a lot across Wix. And I'm sure most of you can find it very useful.

And the latest styling solution we support, Tailwind that was asked a lot by the community ever since we launched the product. And we've just added it to our latest release. So, that's really cool.

Okay. So, that would be the time for the demo. So, I'm gonna move to CodeX for a second. Sorry. Let me just go over it.

So, for the sake of the demo, we have created this project. It's called Git Ducks. It's a new startup. It's a service provider. It has all of the shiny features of Git management solution. But they have a lot of impact on connecting different developers. Of course, it's not a real company. We created it for the sake of this demo. But it represents a real use case of React and TypeScript application. We're gonna do two tasks today. The first one would be to redesign this top bar. So, the design product, design team of Git Ducks have got their new need. They want to make the connections between developers more prominent. They've broken it down, specced it out, and this is the desired outcome for the team. So, we had a meeting, and this is the desired outcome that we want to build. And we're gonna see how we can use Codecs to design this thing. So, we're gonna relay out this thing. And we're gonna change the design of the connect button. Moving to Codecs.

Okay. So, before we start, let's start with going over what we see here. So, this is the project page of Codecs.

This is where it all starts, right? What you see here are the recent projects that I've been working on. We're going to start with Git Ducks in a second. But I just want to show you what you can do here.

So, in Codecs, you have two options when you start. Or I guess three. You'll see it in a second. So, the first one would be to create a new project. You can use one of our templates, one of our boiler plates. You can see that we're using pretty common technologies and we're adding more and more as we go. And we've added these QuickStart templates so you can play around with what we're doing. You can open local projects from your machine or clone projects from Git. And you can take a look at our tutorials if you're trying to learn and understand how Codecs works. We have this tutorial project and some videos for you to play around.

But what we want to do is to open an existing project that I'm already working on. That's GitDUX. Now I just want you to see how GitDUX is built. So this is GitDUX repo. You can see it right here. And it's pretty much very similar to any project that you know, right? You see that we have packet JSON with the dependencies and the libraries that we use here. We have component files that you can see, React components inside, styling like style sheets. We have node modules with dependencies, libraries that we're using, assets, variables, all of that. So that's pretty much a typical React application.

Coming back to Kodaks, now we're here, you see exactly the same project, right? This is the same repo. These are the same files with our more visual approach to development. On the left, the components from my project. These are the recent components that I've been working on. On the center, these are boards. Boards are Kodaks concepts. It's just a way for us to render components. It's kind of a wrapper to a component.

You can render inside how many components you want, pass different props to it, pass data, so you can basically check all of the states of your component and while you're editing your component, you can edit each one of those states. So boards are just ways to render components and states.

So I'm going to open the app components. I just want you to see the project for a second. Just before, we're going to dive into the task themselves.

So right here in the center, we have the stage. This is the rendering environment of Kodaks. This is where we render the code, of course. Now you can play around with it as if it's like dev tools or like something that we see in the browser. States are triggered. Behaviors that should be triggered by user interaction are triggered. So everything here is alive. It is a React component. But at the same time, you can see that when I'm switching to this mode, I can touch the different elements and I can basically get into all of the parts that built this app component or this profile page component or whatever. You can see that I'm moving into different scopes, changing what I'm actually editing at each point, but I can touch all of the pieces that at the end of the day, this component is combined off. Now, that can be done either from the stage or from the left side right here, you can see the elements panel. The elements panel is a representation of the DOM structure combined with your source code. You can see that we have HTML elements, components from my project, or from third-party libraries, and expressions, things that cause other elements to behave or to be shown, things like maps, repeaters, conditions, other expressions that may not be shown in the DOM but have a lot of impact on how the DOM looks at the end of the day. So, it's as I said, combination of the DOM and the source code. On the right, the properties panel, that's the first one. This is where we edit component props. Now, you'll see in a second, how we're doing that and when should we use it. But just like the elements panel, the properties panel is a reflection of the code. Any change I'm doing to my code will affect all of the panels accordingly. And vice versa. Of course, we are editing the same source. Just below, the computed style panel. And as you may know it, it represents the styles of the element that I'm currently selected on. So, it's a very helpful tool when I'm trying to check that I did everything right, that I've implemented everything properly, that I'm using the right values, a way for my team members to check my work as well. But it's not only a tool for checking my code for validation.

It's a very good tool for navigation. See this button right here? Clicking it will take me to the right place that I need to edit this background color if I want to change it. So, I'm going to click it, and I'm redirected to the third panel right here. The styles panel. This is our CSS editor. Now here, I'm editing basically everything that is style. Consider that I was already selected on this button select all. And I have all of the property that I need to edit right here in front of me. The end.

Everything here is always available through the code. So, this time I jumped to the code of the style sheet. But you have access to all of the files of all of this project at all times. This is just like your ID. So, files can always be accessed through Codex as well. Let's start with the first task. So, let's just remind you all what was it. So, we're going to do this redesign. So, this is Codex. I'm going to go back to the homepage and we want to manipulate the top bar component. So, you can see that I already created three boards already. These are the different states of this component permutations that was important for me to make sure that exist. So, what we want to do kind of happens here. So, let's quickly take a look at how this code is built and what do we want to do with it. So, the first change would be to restructure the position of this button. So, I'm just going to drag it here and I'm going to place it at the top. So, as you can see, it just moved the element in the JSX order. I'm editing it from the stage and I'm keeping my code as it was. I'm just replacing it where I wanted it to be. That was easy. Let's move to the second change.

We actually want to change the style of the button itself. So, I'm going to double click and go into the scope of the button, right, because I want to change the connect button component and not the top bar that is using it. So, the first thing that we wanted was to change the background color. I'm going to click it right here because it's going to help me go to where I need to go. And I'm going to change the background.

So, clicking it right here, I see that I'm using an RGB value. I can take a look at the code as well. And we can see that it's not what we want, right? It's not the color, and it's definitely not the way that we want to code it. So, I'm going to use a variable. As you can see, I have all of the variables from my project available for me here. I'm just going to click it. And as you can see, the change was affected. I can see it on the stage and I can see it in my CSS.

Second thing that I want to do would be to change text color into white, same here. I'm going to use a variable, primaryLight, and I get the design as I want it, right? So, I'm going to switch to preview just to check. Of course, we didn't handle the hover. So, it's almost perfect, but not yet. Let's fix the hover together here in the States manager panel. I'm going to click and lock the element on hover. Now, this is a really cool way to design, locking an element on a specific state. Now I can make the changes and see it in that specific state. Now, as you can see, a new selector have just appeared here when I locked it. We want you to make sure that you see the thing that you added in CodeX. If I wouldn't have this selector, I would be offered to create one, but in this case, we want to change something that already existed. And I'm going to change the background color here as well. Again, let's show you the code that I'm editing. You can see that it's button hover, and I'm going to change it to primary dark. So now when I'm going to reset it back to its normal behavior, switching back to preview, now I can see that the design looks pretty much perfect.

Okay, so let's just make sure that it all looks good, right? I had three states that I previously created, and you can see that it's the same component, right? We see the same top bar component placing all of these three boards, and I see that the design was not affected more than I wanted it to, right? This is the way that it was designed. Same goes with my app component, right? It didn't affect anything that I didn't want to.

I've just redesigned this thing. So the next task for me to do would be to commit and push my changes. So I'm going to write some commit message. Of course, feel free to use the way that you're used to manage Git. This is just a representation of Git flows, but it's all connected to the way that it works. So if you're used to using the terminal, feel free to do that. If you want to use your IDE, that's great. And you can use Codex Git interface as well.

So that was the first task. So we've completed it pretty quickly. Pretty cool. We sent it back to the design team. They really liked it, and we launched the product. But we got a new request. Okay, so we don't just only want to connect developers. We also want to make sure that they understand how many connections do they have. So in this case, we were asked to create this new thing. So we're going to create a new component now together that will show the user how many connections do they have. So I'm going to switch back to Codex. Going back to the home screen, I'm going to create a new component. You can see this button right here. So now I'm offered to use the templates that I have in this project. So I'm going to call the component Connections. This template can be anything you want. You can choose whatever structure of files and folders you want to reuse. If you have that, component templates in Codex are completely yours to create and to control. If you have a structure that you like, files, variables that are imported, context, whatever you need in your component, you can create the templates that you need to speed up your workflow.

So let's take a quick look into what we just received here. So we have this Connections component. It renders the text.

You can see here that it's pretty basic React component structure. I have this stylesheet right here that was created. This project is SAS modules. So this was the stylesheet that was created. Again, this is based on the templates that I have. It has nothing inside. And the board, the board just renders my Connections component. And if we'll need it later to pass data to the component, we'll use it. You'll see it in a second.

So let's start with actually creating the component. So I'm going to click this Add button, and I'm going to see the add element panel. Now, this is a way for us to add more and more elements into the structure. I can use different HTML elements, components from my project or from third party libraries. In this case, it's demonstrating Bootstrap, but feel free to use whatever. I'm going to start with the icon component. That's the first element that we want to add. Again, I can drag it here at the stage. And you can see that it's imported into the file, right? And it's added to the structure to the JSX. But I still see this error. And I get this type error. And it says that I have this required property that is missing. I can also see it right here in the props panel. As I said, the props is a representation of the interface of that component. So we're just reflecting it in a visual way. So now we show that there's an error here and I get all of these values that this property can accept. So if I'm going to choose this followers value, this is the design that we need. You can see that we don't see the error anymore and everything renders as expected.

OK, I'm going to add another element. I'm going to use a span. This would be used to represent the number of connections this user has.

But in this case, we don't just want to have a fixed text. We want to connect it to a data that comes from an external source. We need the user to see the real number of connections. So in this case, we're going to expose a property for this component interface.

Now, this is something that we currently don't cover in codecs from the visual panels. We are working on some of these, and we'd love to hear your feedback. So it still happens in code. So I just want to show you, how can I jump to VS Code to implement the change that I want to implement and go back to codecs?

So I'm going to call this property count, and I'm going to use a number. I'm going to add it to the structure of this component, and I'm going to replace this text with count property. Now, once I hit save and go back to codecs, we see here that I no longer see the text, but I do see in the elements tree that I have an expression. Now, you can see that it was also changed in the code here. So basically, it's all working together.

So I'll go back to the board and try to see the props of this component. You can see that we now have a new property added, the count property. And once I'll pass any value to it, I will see it render as we want it to render. You can see it here as well. The board is just a file in your repository. You can do whatever you want. If you want to manage things with code, that's great. You can also do it from VS code. Boards are added to your project, and you can put them wherever you want and manage them from VS code or from wherever you want, if you want to. Okay. So that's pretty much what we wanted, right? We do see that we have a layout problem, but before I'm fixing it, I just want to make sure that it all looks okay in this composition, right? This is the task that we've received.

So I'm going to click the add panel again, and now I'm going to see this new component, the connections component right here, right? And I'm going to add it to the bottom where the designer has intended. And I can already see that I have this data that doesn't come in, right? So in this case, I want to connect it to the data that comes from the interface of the Toppar. So what I just did here was exposed it to the user interface that this Toppar component is passing. Now, once I've connected it, you can see that it renders some number. This is the number that comes from the board of this Toppar component. And that's where I wanted it to be connected. So now, once we have that covered, we can do the last thing, and that would be to fix the layout right here.

So again, drilling into the connections component, you can see now that I can basically edit it from any scope, right? This is the Toppar component, and this is the same thing, just isolated from the others. So in this case, I'm going to use a pretty basic flex layout. I want you to see the code while I'm doing it. So I'm going to choose flex, and I want things to be aligned to center. And I'm going to use a small column gap of three pixels, that's according to the design. And I can see that it looks exactly as it should have, right?

So I was able to basically change everything that I needed to change from this visual experience. See the code is good. Now let's make sure that it looks good in these three states. I see that I didn't affect anything. Same goes with my app. You can see here that it looks great. I have different data in my app. So that's amazing. It means that I'm actually connected to the data that it pours in, but I'm rendering it properly. So that would be the last thing for me to do, would be to once again commit my changes so my team members can get that component. Of course, if you have eventual commits and all of that, feel free to use them. That's yours from now on. And that's it. That's pretty much what I wanted you to see. So I've finished my task. I've made the redesign, created a new component, made sure that all of the states are affecting what they should affect. Tested it in different states. I can come back here and create another board for my Connections component if I want to. Let's say connections long number. If I just want to make sure that I didn't affect something that I shouldn't have had, I can give it a max-width and give some ellipsis if I want to. That's my way to make sure that all of the states are managed properly. At the end of the day, everything that I'm doing is reflected here. So that was what we wanted to show you in Codex. We're going to help you install the product. By the way, these are the links.

We're going to come back to that in a second. So we're going to help you install the Codex product. If you want to do it on this few-minutes break, you're more than welcome. Go to codex.com. I'll show you the QR in a second. Download it. You have all of the different operating systems. We should have you all covered. I believe so.

At this point, once you're going to start it, we will make sure that you have Git and node installed. These are the two requirements of Codex to actually be able to run real projects. And you're going to need to log in. So either log into your Wix account or create a new one. And once you're doing that, you should be inside Codex. So again, feel free to use this QR code to scan. It was a bit faster, so I'm going to come back five minutes before five o'clock. So that would be 12 minutes from now. So take your time. Download Codex in the meanwhile and install it.

The next thing we're going to do would be to actually start the project setup and start doing some actions. And again, if you need any help, there's several of us here that would love to help you around with whatever you need to do. If you have any problems, feel free to just write it here in the chat. We have already pre-made breakout rooms, so if you need one-on-one assistance, don't hesitate.