How Ueno chose their framework and why they went with Gatsby

In our latest video with Birkir, he and Sadek discuss how Ueno chose their framework and why they went with Gatsby. Choosing Gatsby and staying React-based allows for a component-based approach that makes it easy for projects to be divided whilst still allowing developers to easily collaborate and work independently. Their preference for a component-based approach is one of the main reasons that they like using Prismic as a CMS.

Watch the full video, but this transcript will allow you to make sure that you don't miss any of the little details. Subscribe to our channel so that you get all of our latest interviews - including the rest of the series featuring Birkir.

Highlights:

Birkir speaks to Sadek about why Ueno chose Gatsby as their go-to framework.

• React, as a view layer, is a good methodology to build components
• This modular (components) approach allows productivity, coherence, reusability, and collaboration.
• It's cohesive. It's easy for a lot of developers working on the same project to collaborate and there's no collision.
• Gatsby allows you to setup your project faster: no need to add Webpack and handle static-site generation yourself without needing to maintain your own starter kit.

Sadek: So I'm here again in Prismic Studios, always with Birkir. In the first video, we talked about, what it's like to be a technical director for a studio like Ueno. And we touched different topics, like technology, how do you work together as a team and how do you get these kind of very good results that you're getting. And in this video, we'll dig deeper into the technology part.

Birkir: Yup.

Sadek: So, why did you choose? You said that you use React?

Birkir: Yeah, like I said earlier, we are a React shop. So we mainly do React for building websites and building apps.

Sadek: Right and why did you choose React first?

Birkir: So yeah, we've gone all around. We've used Polymer before. We've used just Vanilla JS. And React, as a view layer to us, is just a good methodology to build components.

Sadek: You mean for designers as well? Or for you, for developers, who for?

Birkir: No, for building websites. It's mainly like if you think about everything is a component, it's a good methodology.

Sadek: It makes sense to break pages into components.

Birkir: Yeah yeah, even though like it just to use the same kind of structure, like I don't care if it's React or something else, if it's in the same modular way. But React has nailed this, and I think they're here for a very long time.

Sadek: At least the components approach, I mean there is a Vue as well.

Birkir: Absolutely.

Sadek: And they're doing a very good job but at least the component approach.

Birkir: Absolutely.

Sadek: And so what do you win by taking the component approach, by taking something like React? Is it productivity? Is it what, coherence?

Productivity, coherence, reusability, collaboration. I mean, it's cohesive. It's so easy for a lot of developers working on the same project, and there's no collision.

Birkir: Yeah, productivity, coherence, reusability, I mean yes. Collaboration as well. I mean, it's cohesive. It's so easy for a lot of developers working on the same project, and there's no collision. "Oh, I just made that component in this Git file. You can just use it. Oh okay, yeah."

Sadek: Oh nice, okay cool. It helps with teamwork.

Birkir: Absolutely. So you don't have cohesion but you still can share things. There's a defined way of sharing things.

Sadek: And did you have the case when you tell a client I'm building a page with React, they tell you, "Oh, SEO and speed, and are you sure that you want to use React?"

Birkir: Yeah absolutely, we get those questions all the time but the frameworks that we currently use they take care of all of that, so.

Sadek: Which is?

Birkir: We mainly use Gatsby. And that's kind of our go-to system if we want a static site built, so.

Sadek: When did you start using Gatsby?

We created our own kind of starter kit that we used. And this became unbearable to maintain.

Birkir: That's a good question. We transition into different frameworks quite easily. So because we're very open to technologies. We used to have our own starter kit. Because when you have a React codebase, you have to have Webpack in order to build. Then you have to have all the different like CSS modules, and you have to use Sass, and you can use different NPM packages and so on. So you have to bundle everything together. And then you have to have a server. You have to service side render the HTML. So we created our own kind of starter kit that we used. And this became unbearable to maintain.

Sadek: You made your own Gatsby?

Birkir: No, yeah, pretty much. It was closer to a Next.js.

Sadek: It's a good choice as well, Next.js.

Birkir: Next.js is great as well. We use it sometimes when we need the backend integrated into the website. Where we have to connect to different APIs and so on.

Sadek: So then when you started doing all of that, you said maybe, it makes sense to take something out of the box that handles that?

Birkir: Absolutely. We found a different starter kit that was like actively maintained. And we decided to stick with that and add some layers of technology that we currently use. It was called starter-kit-universally. And but then later on, it's stopped being maintained. And at the same time, Gatsby and Next.js popped up. They gained a lot of popularity, and we quite easily joined them.

Sadek: So you, are you happy with using Gatsby today?

Birkir: Yeah, very very happy.

Sadek: So how does the workflow go? When you have a page, you have to implement the page, you develop the components. Do you do some queries? What do you use in your queries? What kind of a query language you use?

We have the homepage, and then we create the elements page. And then we go into the components directory and create all the different components that compose a page. And we add them to the elements page, where we can very easily see all the components that are being made.

Birkir: Yeah, so to begin with, all of us add TypeScript. So we have Types. Then we create the pages. We usually like look at the design. Okay, we have maybe 5 to 10 different pages. We have the homepage, and then we create the elements page. And then we go into the components directory and create all the different components that compose a page. And we add them to the elements page, where we can very easily see all the components that are being made. Because if we had like five persons from the team, we may not know who's working on or like who has done what component. Because when we slice down the design, some developer may be working on this and some other may be working on this. But they share the same button. And it's just a matter of who is first creating that button.

Sadek: And then, you use, you told me you use GraphQL.

Birkir: Yes, so we also yeah. Gatsby is GraphQL first, and you query all your data with GraphQL, even though it's just local, local files. If you want to create a simple blog, you could have Markdown files. But you query them with GraphQL. But the same goes with if you have to use external services like Prismic or Headless Wordpress or whatever you want.

Sadek: Right, so you use GraphQL. You query these things. You push them into the components. The front-end developers will work on different components. And then that's it. That's the page.

Birkir: Yeah, there's probably one other thing that I forgot to mention is that we often create like a container components, components that query the data, get the data and pass it down to different component. So they're more like a structural component.

Sadek: And you told me that, when we were talking earlier, that you, for each project, or most of your projects, you start from scratch. Unlike what others maybe would like prefer to start from some kind of theme or some kind of scaffold. But you'll like to start from scratch for every project.

Birkir: Ah yes, that's kind of our goal. Like my friend, David. He's the ECT in New York. And he likes to go away from the sameness. He thinks every website kind of has the same look. So we want to do something new all the time.

Sadek: And you take that seriously to start from scratch so that.

Birkir: Yeah, yes.

Sadek: You're sure there's no line of code that is shared.

Birkir: If you have a good base, base as in you know, the technology set up in the right way, so we can use them.

Sadek: Yeah, of course. Ah, so you rather invest time into making that good base.

Birkir: We're so quick creating components, and that's key.

Sadek: Okay cool, well maybe the next video, we'll talk more about the CMS choice and how you do that.

Birkir: Yup.

Sadek: Cool, thanks.

Birkir: Thank you.