Jamon, Jon Major, and Mazen interview Haris Mahmood about Shopify’s “Restyle” styling system. We talk about why Restyle is TypeScript-first and how it helps scale their styles at Shopify.
Jamon, Jon Major, and Mazen interview Haris Mahmood about Shopify’s “Restyle” styling system. We talk about why Restyle is TypeScript-first and how it helps scale their styles at Shopify.
This episode brought to you by Infinite Red! Infinite Red is a premier React Native design and development agency located in the USA. With five years of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter), Infinite Red is the best choice for your next React Native app.
Helpful Links:
Connect With Us!
Jamon Holmgren:
All right, so Robin is out this week because she was prepping this week for Microsoft's Web Wednesday, which was yesterday because we are recording on a Thursday. Did you get a chance to tune into that, Jon Major?
Jon Major Condon:
I did. It was amazing.
Jamon Holmgren:
I did too. I really, really liked, so Robin's not the type who naturally gravitates towards behind a microphone, usually it takes some amount of effort to push her in that direction.
Jon Major Condon:
You would have never guessed.
Jamon Holmgren:
Yeah, right? She is so natural behind the microphone. And this time it was live coding, like a livestream in front of a bunch of people, Microsoft streamed with Christopher Harrison, and she did such a great job.
Jon Major Condon:
Yeah, my heart would have been up in my throat if I was doing that live coding, but she looked so calm and it was seriously a fantastic job. I got to learn a lot. I'd never seen the rendering of a component from, well from android to iOS, yes I've seen that shared component style, but not to web, so that was pretty cool to see all three sharing a component.
Jamon Holmgren:
Yeah, her topic was that she was basically sharing React Native and React Native Web with the same component across a browser, android and iOS, with an audience that has never really seen React Native at all, like this was brand new to them entirely. And I think that was a really cool, she did a great job, it was great to watch her. And we had good support from the team giving her cheers in there, so that was fun. It was a lot of fun. But she gets the week off of the podcast of course because that's plenty on her plate along with her normal duties of leading I guess one of the bigger projects at Infinite Red right now, that's what she's doing. And both Jon Major and Mazen are on her project. Speaking of which, I am joined by my grand co-hosts here, Jon Major as well as our guest host Mazen Chami, Jon Major Condon. And a guest also today who I will introduce shortly. But really quickly, Jon Major lives in Janesville, Wisconsin, is a senior software engineer here at Infinite Red, he's also the editor in chief of the React Native newsletter. And Mazen Chami lives in Durham, North Carolina, he is a former pro soccer player and coach and is a senior React Native engineer, also here at Infinite Red. How's it going, Mazen?
Mazen Chami:
Going well. How are you?
Jamon Holmgren:
I'm doing well too. And by the way, I guess I should introduce myself for those who maybe are tuning in for the first time. I am Jamon Holmgren, co-founder and CTO of Infinite Red, and I live in Southwest Washington State near Portland, OR. With us here today is not Harris, Harris is not here today, he actually pulled a muscle in his back or did something, the dude is really, really hurting right now so we were like, "Okay, take the time to get better." We brought in a guy with one fewer R's in his name, Haris, did I say that right Haris? Is that correct?
Haris Mahmood:
Absolutely nailed it.
Jamon Holmgren:
Oh perfect, I'm glad, I'm glad, Harris Mahmood. Haris is a designer, developer and educator based in Toronto. He currently works at Shopify. He has taught at various places, also sells some awesome tech pins on Rep It Supply. And what's a tech pin?
Haris Mahmood:
Yeah, so a few years ago I noticed that there was a pretty big surge and hype around enamel pins all of a sudden, and I realized that there was no one in the market focusing on us fellow developers. So I decided to take a stab, start my own Shopify store, where I ended up manufacturing and selling some JavaScript pins and React pins and all that good stuff.
Jamon Holmgren:
That's awesome. And were you working at Shopify when you put up your own Shopify store?
Haris Mahmood:
Yeah, absolutely. That's something that they really recommend that we try and do to sort of be merchants ourselves, build that empathy to what it's like to use the tooling and the software itself, definitely goes a long way.
Jamon Holmgren:
I always thought that that would be kind of cool, like if you were working on something that you also used and you're just like, "Man, why don't we have a button here? Like we need a button shortcut from here to there," and you just are able to maybe talk to the product owner and be like, "Hey, I want to add this button," and then just go in and add it.
Mazen Chami:
Developers sometimes, I feel like we forget to use the product that we build out of development, and I think it's really good that you get the opportunity to build your own store and get to play around with it and see how it works. And like you said, Jamon, you need an extra button, you can ask the project leads to help you build that. So that's pretty cool.
Haris Mahmood:
Yeah, it definitely helps to notice some things that you feel are missing or could be better, give that feedback to the appropriate teams, and even sometimes play a role in implementing some of those changes. It's a pretty cool cycle and it just makes the whole experience even better.
Jamon Holmgren:
I love it, I love it. Now, you've been involved in another thing called Focus Pocus, can you talk real quickly about what that's about? That's a great name, by the way.
Haris Mahmood:
Thanks very much. So Focus Pocus, unfortunately has been sunsetted, but this was my first foray into the world of building a little product on the side. It was a form processing tool to help folks how didn't know much about backend code to help them build out contact forms and what not on static websites. And the Focus Pocus tool would take care of all of the processing of those forms itself.
Jamon Holmgren:
Yeah, makes sense. Forms is always a thing that, it's kind of a specialized skill in some ways, but it's such a common thing that needs to be done. Specialized in the sense that really knowing it well is more uncommon. Almost everybody's implemented forms if you're a developer.
Haris Mahmood:
Yeah, absolutely. I think it sort of spawned from a need from when I was teaching at these various boot camps and non profits, where learning how to build forms in HTML and CSS was part of the course material and everyone was super excited, but obviously when you try and actually submit the form nothing happens. So this sort of came out of a need to fill that gap while these folks went off and learned a little bit more about backend development and how to maybe support form processing for themselves.
Jamon Holmgren:
Yeah, awesome. Well very much appreciate you coming on the show here today and welcome Haris, it's great to have you.
Haris Mahmood:
Thanks so much, glad to be here.
Jamon Holmgren:
This episode is sponsored by Infinite Red. Infinite Red is a premier React Native design and development agency located fully remote in the USA and Canada with years of React Native experience since it was released. And deep roots in the React Native community, we are the hosts of Chain React the conference. We also publish the React Native newsletter to over 12 thousand subscribers, Jon Major does I should say. I like to say we because it sounds like I have something to do with it, but it's Jon Major, let's just be honest here. Infinite Red is the best choice for your next React Native app, hit us up, hello@infinite.red or just email me directly jamon@infinite.red. And of course if you have any complaints about this episode, you can email jonmajor@infinite.red, that is where complaints go, right Jon Major?
Jon Major Condon:
Yeah, I guess so, yeah. Mm-hmm. No, please don't.
Jamon Holmgren:
Love the deer in the headlights look. He would just forward it to me anyway.
Jon Major Condon:
Yeah, I have all my emails already forwarded to you.
Jamon Holmgren:
Just directly, yeah. I email you and it comes back to me and then I do it, whatever I asked you to do, yeah. Learn more on our website, infinite.red/reactnative. Don't forget to mention that you heard about us through the React Native Radio podcast. And also we are hiring if you're a senior level React Native engineer located in the US or Canada, go to careers.infinte.red and fill out the form. All right, let's get into the topic for today, exploring Shopify's Restyle. I'm really excited about this because I've never used Restyle, but when I was looking through it, both when I first heard about it and also when I was doing a little bit more in depth prep for this podcast, it looked a lot like the direction we were trying to go with Ignite's built in system, but way more mature. Way more mature, way more full featured, better thought through. Ignite's is decent and we use it for a lot of apps, but it's definitely like step four and you're at step 10. And I really like this, it's very, very cool. Before we get into Restyle though, tell us a bit Haris about how you ended up at Shopify.
Haris Mahmood:
So about five and a half years ago I was working at an agency working on a variety of different types of projects, some mobile, some desktop, some web, everything in between. And at that time, I had always had my eyes set on Shopify. I really liked the product that they were building, I loved the eCommerce space, and I knew I eventually wanted to try and weasel my way in. Fortunately, they were hiring and they had just started to build out their front end development team at that time based in Toronto. And that was the perfect opportunity for me to apply and long story short I've been around for almost six years at this point.
Jamon Holmgren:
Oh yeah, so you're a long timer there, that's awesome. I've used Shopify for at least that long just for building for clients and also did a little bit of stuff for myself with it. And I've always been a big fan, I always think that Shopify's a great product, it's fantastic. So we know, I mean most of us know what Shopify is, but what's Shop?
Haris Mahmood:
Yeah, so that's a good question. So Shopify has predominantly focused on the merchant space, trying to make the merchant experience as excellent as possible. And Shop was Shopify's experiments into the realm of building something that's more buyer focused and trying to solve problems that exist for the buyer space. The app originally started a number of years ago and was called Arrive at that time, and the primary problem it solved was package tracking, package tracking in general has always been a garbage experience. You've got a whole bunch of tabs open, you're copying and pasting tracking codes all over the place, it's just a disaster. So the focus of Arrive at the time was to build a mobile app that would automatically pull in tracking details from your emails and visualize all that data for you and maps, give you status updates on where your packages were, send out push notifications when things were out for delivery, that sort of thing. Since then, Arrive has evolved into what is now Shop. We're sort of built more features on top of the core offerings and we're now focused a lot more on the rediscovery of shops you've previously purchased from and also to help you discover new shops in the Shopify ecosystem.
Jon Major Condon:
So I'm someone who used Arrive and now I was using Shop, and I just realized honestly today that Shopify owns Shop. So my question, did Shopify purchase Arrive or was Arrive always Shop?
Haris Mahmood:
So Arrive was always part of Shopify, it sort of lived under our experimental/garage group for a little bit which is where I started off. And since then, as it's built its own presence in this space, it's developed a name for itself, but it's always been part of Shopify from the get go.
Jon Major Condon:
Let's talk about Restyle and how that came about. So, Restyle is an open sourced library, it's put out, it's on GitHub, and it says it's a type enforced system for building UI components in React Native with TypeScript. I love that type is in there twice, like this is clearly a first class citizen is TypeScript, but let's talk about what it is and how that came about.
Haris Mahmood:
Absolutely. At the start of building Arrive, which is now Shop, there was just a couple of developers. We originally started off with just two folks building out some experiments and there were just three React Native developers who were responsible for building the initial version of what is Shop today. At that time, we didn't have too many screens to worry about, too many components to worry about, and we were already starting to feel the limitations of the default styling mechanisms that React Native ships with. Since then, we've scaled immensely, we've got tons of new features and new components and screens and our team has increased in size tremendously. During that time, we really, really noticed the pain points that existed with the default styling systems, and we knew that we needed to find a better alternative. The two major problems that came about that really forced us to take a step back and analyze what we wanted to do was, one, when we were repeatedly asked for supporting dark mode, that was all the rage and still is, and we at that time didn't support dark mode. And the second was as we were preparing for the rebrand for Arrive to Shop, we wanted to continue building up new features in Arrive and making it look like Arrive, while making sure that it would fit with the new styling system that we wanted for Shop.
Haris Mahmood:
So all of a sudden, we now needed to support Arrive and Shop styling, both in light and dark mode. And the default way of handling styles was just impossible. And co-worker of mine and I tried to see what that might look like with the style sheet API and our heads were about to explode, it was an awful experience. And we could only imagine how much more complicated it would get to introduce two new themes to that entire system. So at this time, a few of our co-workers who were previously part of another company named Tick Till, which became part of Shopify through an acquisition, they had played around with something like Restyle. They had sort of an MVP version of Restyle that they had used internally to help build some of the products that they did in house. Restyle is essentially a much more polished and crisp version of those tools in the flavor that makes most sense for Shopify and how we build React Native at Shopify. The primary goals of Restyle were to solve a lot of those scaling problems, like how can we make sure that anyone at the company doesn't run into too many headaches and aren't stepping on each other's feet while trying to skin the components and screens that they're building and sort of have this idea of theming capabilities built right from the get go.
Haris Mahmood:
So if and when an app decides to support a dark mode theme or an alternate theme entirely, it's almost trivial to do so. And lastly, TypeScript is very, very big at Shopify and heavily used across all of our web projects and React native projects, so we really wanted to see if we could tie that in and benefit from the obsession that we had internally with the magic that was TypeScript.
Jon Major Condon:
So looking at the documentation of Restyle, it looked very familiar right away. Having used Styled System, which is what I believe it's inspired off of, what rough percentage would you say is there of Styled System in Restyle?
Haris Mahmood:
The concept of having these high-level components that sort of accept a variety of different props for styling is the main concept that is heavily reflective from the Style Systems concept. We obviously deviated heavily to be able to accommodate the uniqueness that React Native needs to support and along with some of the naming conventions that we decided to change to make it a little bit more explicit with the prop names and the various component types that we bundle out of the box for React Native.
Jon Major Condon:
Nice, so then when it comes to the different predefined components in React Native, there are the concepts of variants, which also applies I believe in a lot of different styled libraries. So are those variants though only possible with the predefined React Native components, or can you create variants in your theme for custom components?
Haris Mahmood:
Restyle ships with the ability to create a standardized default view component which we refer to as a box component and also a text component. Both of these have support built in right off the bat to support variants, but if you decided to introduce a completely custom component, maybe let's say a card component powered by Restyle, there is a way for you to introduce variant support custom to that specific component that you create as well. So it's not there by default, but Restyle provides all the tools and functions that you would need to make that possible.
Jon Major Condon:
Nice, so then would you say that you would put all of the styles inside Restyle in the theme or would you maybe use Create Style alongside it?
Haris Mahmood:
Restyle does support the default style sheet API as well. You can pass in custom styles using the style prop if needed, but we try and avoid it as much as possible. We really like to enforce the theme concept and the single point of entry for all things style related, whether that's spacing, typography, colors, et cetera. We do understand that there are certain instances where needed to pass in really, really custom and unique styles for, let's say, when you're fighting with a flat list component, for example. There are circumstances when that's necessary, but if you're just building UI components, we really recommend just sticking with what Restyle provides right out of the box through the theme file and not relying on passing in custom styles using the style prop.
Jon Major Condon:
Right on.
Mazen Chami:
I saw on the Restyle repo that you have Polaris tokens. Can you explain a little bit what that is and how that comes full circle back to Restyle?
Haris Mahmood:
So I'm not super familiar with the origins of where tokens came from, but from what I do understand is the idea of tokens is to create a unified set of values that can be pulled into various projects that adhere to a specific style system. Polaris is Shopify's style system, it's super well documented, we really like to ensure that anything that we're building adheres to the concept of Polaris, whether that's partner apps, whether that's internal dashboards, whether that's our marketing sites. Shop sort of lives outside that, given that we have our own aesthetic and our own branding. But the rest of Shopify tries to adhere to Polaris as much as possible. Polaris also provides design tokens to accommodate its various sizing values, color values, et cetera, and Restyle has the ability to pull in those design tokens from Polaris and use those to generate your theme that you would build UIs based off of.
Mazen Chami:
So it's almost like a helper tool to give you specific sizing and/or colors, essentially.
Haris Mahmood:
Exactly. Because by default, the theme file that you create for Restyle is empty, there's no predefined values that Restyle comes with, there's no default themes that Restyle ships with either. The idea is for you to implement your own. And through tokens, you can essentially generate some of that stuff a lot quicker, and you can make sure that the values that you're bringing in are consistent with what the Polaris team has shipped out as their Polaris design tokens.
Mazen Chami:
Awesome. Earlier you mentioned that Restyle is built with TypeScript. Can you go into a little bit more what led to your decision to use TypeScript and have that be a first class citizen in Restyle?
Haris Mahmood:
So, Shopify has spent the last number of years really building out their understanding of JavaScript, their love of JavaScript, we've got dedicated web foundations teams that focus on all things JS and React and all the tooling to support the work that we do at Shopify for web projects. From the get go, TypeSCript was sort of integral to what they built out, and it made sense for us to carry some of those learnings over into our React Native projects as well. As I was getting started in React Native, I hadn't actually played around with TypeScript at that point, and very quickly saw the value of it, especially as we were scaling the size of our team and doubling in size almost every month. We very, very quickly went from just the two or three folks at the start to 20 plus client developers working on the same code base. So TypeScript in general was super valuable, plus the majority of the API work that we do at Shopify is powered by GraphQL, GraphQL is inherently typed as well, and that's just made it even clearer for us to use TypeScript on the client side, just so we could really leverage the capabilities and the flexibility and the power that GraphQL provides us with providing typed data.
Haris Mahmood:
On top of that, just the benefit of using TypeScript itself to ensure, it almost acts as like our first line of defense for code quality and reducing bugs and what not across the board, and sort of has become the default way we write JavaScript at the Shopify, to the point where you could hop onto any React or GS project at Shopify or even React Native at this point and immediately feel at home because the chances of them using TypeScript are super, super high, similarly for GraphQL and a number of projects also use Restyle. So having TypeScript connect all those things together just makes a super cohesive and an awesome work experience.
Mazen Chami:
That's great.
Jamon Holmgren:
Yeah, Mazen's a big proponent of TypeScript here at Infinite Red, which I guess we've used it for about four years now and we love it of course. But when Mazen came on board this year, he's been pushing us even further, which is great. And I love that, because it's not just about, it's all the reasons that you said and it's also scaling and onboarding too is such a big thing because someone comes on board or you're ramping up your team size or whatever, and you can just sort of make sure that these, I guess, implicit contracts for code are explicit and enforced. It's like, "This is the API, and you're going to use it this way or else it won't compile basically."
Haris Mahmood:
Yeah, absolutely. I was recently onboarding someone with a traditional iOS coding background into React Native, so sort of gave them a crash course in all things Java first before we talked about TypeScript, and they were visibly frustrated at the lack of typing and how you can just throw whatever you want into any arrays or any objects and stuff, and I could clearly see how just JS by itself was causing so much confusion. And I just said, "Don't worry, when we get to TypeScript all of these issues go away." So it also really helps when traditional Native developers from iOS and Android are coming to a React Native project as well, they can see some of those typing requirements filled by what TypeScript provides, rather than needing to just use JS instead.
Jon Major Condon:
Something I noticed in the recent years is switching to TypeScript there's less of the guessing game which we're all talking about, but when you go from JavaScript to TypeScript, you don't really need much documentation or much tribal knowledge at first because you get so much of the auto complete feature that you didn't have with JavaScript and VS Code. And VS Code does a great job, but with TypeScript on top of VS Code, it works wonders.
Haris Mahmood:
Absolutely. I think the way I write code has changed dramatically the more we've leaned into all things TypeScript. My reliance on having documentation open has decreased as time has gone by, and I'm leaning more into what TypeScript provides, the auto complete that VS Code does for us as well. It's really cool to see the shift of how we spend our time as developers as time has moved by in the last few years.
Mazen Chami:
I love thinking of TypeScript as a first line of documentation for your preset design components, because then you don't have to go out there and check the documentation for that specific component and see what the props are, you essentially hover over it in VS Code and see exactly what are the required fields to get you the minimum component and then eventually get deeper into what it is and that's great. My next question is about accessibility, how big of a role does accessibility play in Restyle?
Haris Mahmood:
Accessibility itself doesn't play a super big role in Restyle, but it does play a big role in how we build React Native projects at Shopify as a whole. Accessibility is baked into everything that we do, so from the Polaris design system, how you should write content, how you should structure content, accessibility rules start there built into the fundamentals of how we think about products and how we think about design. At that point, the themes and the designs that we build are based off of color palettes and typography systems, and we make sure that those adhere to the standards and protocols that we need to make sure that what we're building at the end of the day is accessible. Creating these foundations and then relying on these to build our UIs using Restyle along with the various props that we get from React Native by default, plus some additional finessing that we've had to do ourselves, results in a pretty accessible experience.
Haris Mahmood:
This is something that we're still working on, it's something that we're still learning as well. Shopify as a whole is relatively young in the React Native space, so there's lots of education and lots of context building that we're doing on what the best practices are when it comes to accessibility for React Native, but I think we're making pretty good progress, I'm super stoked with the amount of work that we've done on the Shop app so far. And we'll continue to do so in the future.
Jamon Holmgren:
Yeah, that's awesome. Actually the project that Robin, Mazen and Jon Major are working on right now, accessibility is not, it feels like sometimes when clients come to us, which I love you clients if you're listening to this, but sometimes accessibility isn't the top priority or even a priority at all. And luckily, the project that they're working on right now, they came to us and they said, "Accessibility is totally a primary concern here." And so it's been something that we've been able to push deeper into and expand our core knowledge around accessibility within React Native, as well as just building a library of knowledge around what types of things we have to be thinking about, and also just exploring and finding where the edges are because some third party modules aren't as good as this, some ways we're approaching this aren't as good, and we have to really be thinking about that.
Haris Mahmood:
Yeah, and I think certain times folks will just think accessibility means needing to support things like high contrast mode or just the super default and obvious assumptions that people make when it comes to what accessibility means, whereas we really like to widen that lens and tackle all aspects of accessibility, obviously for things like color contrast, but also to font scaling, which is baked into every mobile platform. But tons and tons of people will scale their fonts up even a tiny bit just to make it a little bit easier for them to read, because I guess the world has gravitated and moved towards using tinier and tinier fonts and that's definitely not super helpful to my parents, especially. So even scaling your fonts up a tiny bit, a lot of apps just don't support that and just have these fixed sizing values. Or as text scales, it immediately breaks their UIS and render them completely unusable. So I think that there's a lot of education that needs to be built up as well just in the space in general. I think there's lots of folks who don't fully understand the realm of accessibility and how broad it is and the ways that you can make your app more accessible, so I think that's a constant challenge and something that we're working on internally as well and running little workshops and building these example cases to help educate the company as a whole.
Jamon Holmgren:
Yeah, those are some great examples. And I guess tech being generally younger population just on average kind of hurts us a little bit in that where we don't really think about it. Now, I'm almost 40, so I'm starting to get to the point where I'm going to start probably thinking about it. But I guess it's just something where like, "I can see this just fine, why would someone have a problem with that?" Well, it's because you're 25 and have 20/20 vision or glasses, I guess. But that's a great point. And making it so that building accessible apps really is no more difficult than building a normal, I shouldn't say normal, but just an app where that's not a priority, remove the friction, have tools, have processes in place where you just make it that way, it's just kind of how you do business.
Haris Mahmood:
Yeah, I think where we've found the biggest challenge is not necessarily making components accessible or just implementing some of the basic foundations of how you build an accessible app, but rather the UX behavior of certain elements, how do you expect this interactive map to behave if you have voice over turned on? Those are some of the weirder questions that we have to try and figure out answers to that aren't as straightforward. So things like applying a label to images and accessibility props to buttons, those things are very trivial and super straightforward. But it's some of those interesting UX patterns is where things get pretty tricky and I think that's where a lot of knowledge is lacking and there's not a lot of best practices put into place yet. So it's a little bit of a wild west when it comes to that, but it's pretty cool to see lots of companies and lots of folks putting in the effort to make their apps accessible, and helping define some of these best practices moving forward.
Jamon Holmgren:
So we've been pushing more this year into what we call React Native All Platforms, we have a #reactnativeallplatforms. And we're really pushing into, because we've basically made the decision that we're going to do React Native wherever it is. We're not going to be doing React JS, we're not going to be doing backend to any major degree. Really our focus at Infinite Red is going to be React Native, but that means really going wherever it is. So does Restyle have support for React Native web, macOS, tvOS, Windows, have you pushed into any of those other secondary platforms?
Haris Mahmood:
So Restyle today doesn't support anything aside from iOS and Android, and that's because Shopify as a whole hasn't really delved into too much React Native besides that. There is, however, one team that recently shipped a rebranded Shopify pins as Shopify Inbox, which uses React Native Web. And they really loved the experience, they shared a ton of their learnings internally as well, but so far they've really been the only ones to use React Native Web. I feel that as the need grows internally and as there's a bigger pull towards more React Native web projects, I wouldn't be surprised if Restyle built out some functionality to support that too.
Jamon Holmgren:
Every time that we talk about React Native Web I bring this up, but I'm going to do it again. I'm of the opinion that React Native Web is what React JS should have been, because React JS is still too coupled to web, it's like why didn't you call that a div, why did you call that a span? For one thing, those words don't mean anything, I don't even know who came up with this naming, div, span. I like what you did, box, box makes sense. I can tell my eight year old, "Hey, draw a box on the screen," she knows what it is. If I tell her, "Draw a div on the screen," she's not going to have any clue. But I look at React Native web brings in view, it brings in text, it brings in things that are an abstraction layer above whatever platform you're pushing it to by necessity, because of course iOS and Android had different names for things, so they had to abstract it, they didn't just have one platform. So I bring this up every time, React Native Web is what React JS should have been.
Haris Mahmood:
I like that. I think right now if I were to approach that subject to rewrite everything that is in React JS to React Native, a lot of people would not be very happy with me given how much React JS code we have. But I wouldn't be surprised, especially if we spawn off and run some experiments or build some new products off of the Shop ecosystem that needs to use a lot of what the React Native apps already provide, React Native Web would be super ideal for that.
Jamon Holmgren:
Yeah, totally. All right, so I'm going to ask you a hard question because we're hard hitting journalists here on the React Native Radio podcast. So what sucks about Restyle?
Haris Mahmood:
I like to use Restyle in all of my personal projects as well or like hack days and that sort of a thing, I really do think that Restyle needs to ship with at least one theme, just so that you have a starting point. Needing to worry about a color palette and basic typography requirements just seems a little too much if you're just trying to experiment. I would love to see a default starter theme, there's plenty out there that exist, it doesn't have to be super full featured. It would be great to just be able to prototype something a lot quicker. It's just far too much of a lift to built a basic theme right off the bat.
Jamon Holmgren:
That totally makes sense to me, and I could see that as a decision that was made to keep it lighter and really more focused, but I like that idea of it shipping with a default theme. Or maybe having a place you can go where you can just grab, copy, paste themes really easily and see what they look like. That's a great idea, I love that.
Jon Major Condon:
So then in terms of what's next for Restyle, would you say what you just said that sucks about Restyle would be next or is there something else?
Haris Mahmood:
Oh my goodness. So I feel like now I have to do this, I have to built this.
Jamon Holmgren:
That was a trapping question, wasn't it? He totally trapped you into it.
Haris Mahmood:
Well done, well done. I mean, I'm pretty jazzed by that idea, I think I definitely want to, I think that's a cool thing to take on. Aside from that, there aren't any super big features or needs that we've identified that we need to implement for Restyle just yet. There's a number of teams using Restyle at Shopify and everyone's been pretty stoked about what it's providing out of the box. If things come up, especially things like React Native web support, I think those might be opportunities for us to dive more into building out some more features for Restyle. But for the time being, it's in a pretty good spot. It will need some continuous maintenance just to make sure we're addressing bugs and addressing just version updates and stuff. But feature-wise I think we're in a pretty good space unless we delve into some really, really interesting new directions.
Jamon Holmgren:
For people who really want to get into Restyle, their interest is peaked here, what's the best way to get started with it?
Haris Mahmood:
Great question. So definitely head on over to the GitHub repo, it's GitHub.com/Shopify/restyle. And there's an awesome set of insulation instructions that walk you through all the steps that you need to get going. It may seem like a lot, it may seem like it's pretty daunting, but I promise you it's not, it's just very feature rich and by default you don't need to use most of it. You'll mostly be defining a brand new theme, which is just a big JSON object that defines your spacings, your colors, your break points, that sort of a thing, and putting together a provider that is able to handle and accommodate your various themes. And then finally, building out your new box and text components to be able to begin using the values that you've defined in your theme object. So that's all you really need to get started. That's excluding things like theme toggling and creating your own custom React components. But if I were to NPM install and go through all the set up instructions right now, it wouldn't take you more than five minutes to go through everything, it's pretty straightforward.
Jamon Holmgren:
That's fantastic. Yeah, looking at this read me there are a lot of code examples, there's a reference to everything. It looks really good, the read me looks good. And I can't wait to dive into this, I'm going to definitely be playing around with it myself on some stuff. So yeah, very, very cool.
Jon Major Condon:
Jamon's going to have a PR for you for the what "sucks".
Haris Mahmood:
Yes please.
Jamon Holmgren:
Or I'll email you Jon Major and then it'll come back to me and then I'll have to do it.
Haris Mahmood:
Or maybe even a Jamon themed starting theme for Restyle.
Jon Major Condon:
I love it.
Jamon Holmgren:
I don't know if people want to rely on my design experience. But you know what? I could give it a try. We did have a question for you from the community, David, a good friend of mine says, "I use Restyle with all my clients and it increases productivity for sure. No more inception design development with five levels of abstraction. Question, how would you handle the new pressable API with Restyle, especially for a pressed style?"
Haris Mahmood:
The pressable API, if I remember this correctly, the style prop for pressable accepts a pressed prop that helps identify the state of the pressable components.
Jon Major Condon:
That's right, yeah.
Haris Mahmood:
So my immediate assumption is to create our own abstraction around pressable that takes in those Restyle props and maps them down to those various two states for the pressed and non-pressed state for the pressable components. I think that should cover your basis and you're all set.
Jamon Holmgren:
Yeah, that sounds great. I forgot, I haven't used pressable a lot, but I do remember that, it passes through the state to your styles and then it can pick that up. Awesome. And lastly, I assume some of our listeners their interest may be peaked a little bit here, is Shopify hiring right now Haris?
Haris Mahmood:
Ooh, indeed we are. Shopify's got this goal of hiring 2021 engineers in the year 2021, which is pretty exciting. So we're growing super fast. Shopify is also now fully remote moving forward even post-pandemic times, so you're welcome to apply from anywhere in the world. Currently, the two major teams that are looking for folks are the Shop team itself and also our retail team, and we're looking for all sorts of senior engineers whether that's backend, front end, React Native or traditional iOS and Android devs. Feel free to reach out to me or I'll make sure to share a couple of links on my Twitter after this as well, so feel free to take a look at those. Or you can just hit up shopify.com/careers.
Jamon Holmgren:
That's perfect. Yeah, I've heard a lot of good things about Shopify. Obviously you've been there for years now Haris, so they must be doing something right. And yeah, 2021 engineers in one year, that is a lot of growth, that is incredible. We're hiring a few, we're not hiring 2021. So the best of you can apply at Infinite Red and the rest go to Shopify. I'm just kidding. Okay, we're a little over time so I'm not going to go into the weird bug or what's new with the React Native newsletter. Go to reactnativenewsletter.com to check out the latest edition. Jon Major actually just pushed one out before our recording, so go check that out. There's a lot of cool stuff in there. I was actually clicking through and opening like eight different tabs based on all the cool stuff that he's linked to. Where can people find you on Twitter, Haris?
Haris Mahmood:
I'm a huge fan of dinosaurs, there's a reason why I mentioned that, it's pretty much because all of my social handles across pretty much all platforms is just harissaurus. So find me on GitHub, Twitter, Instagram, all that good stuff. I'd love to chat more about all things Shopify and React Native.
Jamon Holmgren:
Perfect. And Jon Major, where can people find you?
Jon Major Condon:
@jonmajorc.
Jamon Holmgren:
And Mazen?
Mazen Chami:
You can find me @mazenchami on Twitter.
Jamon Holmgren:
And I'm @jamonholmgren. You can also find the podcast Twitter, go follow it right now. We'll give you some time, go follow it right now, @reactnativerdio. All right, got it up on Twitter yet? Go ahead and click that follow button.
Jon Major Condon:
Oh wait, while you're at it, go to reactnative, or rn, dang I forgot.
Jamon Holmgren:
We can never remember this, can we?
Jon Major Condon:
Oh my gosh.
Jamon Holmgren:
It's rnnewsletter. Click on rnnewsletter.
Jon Major Condon:
Rnnewsletter. Hit follow.
Jamon Holmgren:
Yeah, go hit follow there. There's some good content there coming out as well. As always, thanks to our producer and editor Todd Werth, our transcript and release coordinator Jed Bartausky, our social media coordinator Missy Warren, and our designer Justin Huskey. Thanks to our sponsor, Infinite Red, check us out, infinite.red/reactnative. Huge thanks to Haris for joining us today, really appreciate you coming on and talking about Restyle. Can't wait to check that out. And of course, thanks to all of you listening today, make sure to subscribe and we will see you all next time.