Front-end design, React, and a bridge over the great divide
I&#x27;m a &quot;font-end designer&quot;. I&#x27;ve been one for since 2000 or so. To me, that basically meant I was a designer that could write HTML and CSS. At some point Sass was thrown into the stack and things became really awesome. I did this for very big companies and even my own startups that I sold.<p>Before React came around I wrote and used some mootools&#x2F;prototype&#x2F;jQuery, but very frankly didn&#x27;t really know JavaScript and just used them for tricks like carousels or basic AJAXy things. For example, in the Django or Smarty&#x2F;PHP days (yes, like I said, a long time at this) I just had regular old CSS&#x2F;HTML with a whole set of &quot;filters&quot; in whatever the templating system was. It was very, very easy to read the docs and do |dateformats or something for example. I could also |sort things really easy. It was just a filter. I didn&#x27;t need to learn the actual python and it already did the hard work to make sure whatever I had WAS sortable.<p>When I started getting into React I was somewhat taken aback. I needed to actually learn Javascript (for real this time) to just do basic things. I also needed to understand very Reacty type things like how things mount. States were fun and easy to understand, except dealing with previous states. With states I could replace all that jquery which was mostly me just adding and removing classes onto things anyway. That side was much better, but it took me months to actually learn enough JS to actually understand how the &quot;template&quot; format of a React component was structured. Also, EVERYTHING needed to be imported. Want to do some basic color stuff? There&#x27;s a library to import. Want a way to truncate things? Sure, again, let&#x27;s import something that works for more than just simple string limits. Eventually you end up just writing a lot of JS that does this without some huge dependency, but that took awhile to learn as well. The biggest thing I missed was something like Django&#x27;s template docs. All that stuff was just built in, and I didn&#x27;t need to piece it together myself. Ultimately I think that&#x27;s what makes it harder. The world of Javascript is fractured at its core. Want to learn how to write a function? Which version? Have fun doing a google search and getting something that is the &quot;right&quot; way to do things. OK. Now it&#x27;s fat arrows...etc. JS just has years of old examples available.<p>Once I got past all this, it was obviously fantastic and feels like the right way to do things. It let me realize some personal dreams by really building a design system of shared components, not just a CSS library. Now I could take those design skills and build out stateless components that you could piece together like lego bricks. Engineers would then take that stuff and build to their hearts content and I didn&#x27;t have to worry so much about them abusing a selector. I could even document things and show real variations with very simple prop changes. All of this sounds pretty rote and is of course what React is there for, but man did it require much, much more knowledge that what I was doing for &quot;frontend design&quot; back in the sever side rendering days. To this day I know what redux, context and hooks do, but have real difficulty dealing with them day to day. It&#x27;s beyond the rendered DOM and so far away from what I&#x27;m looking to do as a designer who just wants to make things look good.<p>I continue to think coding is invaluable for web designers and to be honest is the only true way to hit zenith in your understanding of the medium, but I really don&#x27;t envy people starting from scratch that have React as the &quot;easy&quot; way to do things if they are moving from just handing you a mock. I think it used to be much easier to get into &quot;coding&quot; as a designer 10 years ago. It&#x27;s likely why I run into more and more designers that simply aren&#x27;t interested in it or think it is impossible. They work in these React houses and suddenly have to learn a whole lot more just to do the basics.<p>I guess what I&#x27;m trying to say is. Hey, I work at a big company with a great team doing what most people would consider high-level React work that is used by at least hundreds of engineers. But most days if I&#x27;m honest I struggle with it too, and I&#x27;ve been at it now for 20 years. That&#x27;s totally normal if you still call yourself a &quot;frontend designer&quot; rather than &quot;frontend engineer&quot;. I know and work with the later all the time. They are fantastic people with a different skillset even though we work within the same files.<p>Anyways, if you&#x27;re a designer who hit the wall with this stuff: keep at it. You&#x27;ll get there. The great part about React is that you can start small. Start with the React Create App and just build a widget. Don&#x27;t jump into Gatsby and suddenly have to worry about GraphQL, routing, image resizing and all that stuff. Just build what you built in HTML, but in React. Add some props as &quot;variables&quot; in your document. Move on from there. You&#x27;ll get there.<p>I still have trouble with JavaScript and have to look up how to deal with arrays and objects all the time. Maybe in 20 more years that part of my brain will match what I can do on the CSS &#x2F; design side. Until then, thanks to all he engineer folks who put up with me and take on the hard stuff.