Whipping potatoes with AK-47 sucks

Reading Time: 5 minutes

I mentioned before that I’m working on my company project: rewriting a big’n’old popular internet portal. I probably didn’t mention that for the front-end I went with as big stack of technologies I’ve been never working with as possible.

As always, I’m trying to gain in a many ways with a single decision – along with a rewriting of my favorite product, I hope to learn about a bunch of new stuff.

I decided that during with my learning I will post some of the “Ah, I see now!” moments with other people. Although, it’s always hard to pick some stuff that seems like something potentially interesting/useful to other people. Just in case I fail, I will try to make this more interesting with my ignorant opinions.

Typescript can be a friggin hell

I write the front-end application using React (with Typescript), Redux, redux-observable, webpack and docker. It’s taking me longer than usual to implement even some basic stuff, but it’s cool! That’s the best way to learn things for me – try to use it in a real world scenario. There is one thing though…

..yeah, about that part: React (with Typescript)…

Source: http://i0.kym-cdn.com/

Typescript is cool and all. React is truly awesome. But React + Typescript… I would say they don’t fit together too well. At least for now.

I used Typescript with Angular before and it worked pretty well. I liked working with it (It’s probably because of my little distortion for strongly typed languages). As Angular is created using typescript, it just feels natural there.

I took Typescript awesomeness for granted I guess and I wanted it in my next project. Actually, don’t get me wrong. I don’t mind vanilla JS at all, it’s just that Typescript is something new to me – so it’s still exciting and fresh. Initial infatuation – it passes I know.

Back to React with Typescript. Something is clearly wrong with the amount of struggling. Maybe I’m doing something wrong, maybe there’s a better way. Typescript just doesn’t feel that good with React. It feels like petting a kitty against it’s hair, running 100m sprint in flip flops, drinking hot milk in an english pub in the afternoon, using Resharper with a mouse or … ok – enough. I hope you get the idea.

Come on. Look at that. I really tried. Just to be able to do that:

I had to do that:

If you don’t know what I’m talking about, this is the simplest react component ever connected to the redux store. I couldn’t find any other way around it to be able to use its props in other components. In ES6 it’s like half of characters needed to be written to do the same. It probably looks better too. And doesn’t explode in your face.

Okay, it’s really not that bad. I guess. Maybe I’m overreacting, but my eyes bleed a little.

I am (as I said) a little distorted for strongly typed languages. Not considering myself a backend dev at all – I hate that distinction. Still I like types. But here are types in types, within types and even more damn C# like generic types! Everywhere! There are more types I need to TYPE than the actual logic there!

Also there are bugs in npm packages with type definitions for react related stuff. Making me so mad.

The internets are full of weird hacks tips (as any ftw). Of course if you ever find something about React + Typescript. Apparently nobody does it – I wonder why?  I mean, sometimes it’s cool to use Typescript with it. The business logic extracted to pure typescript beings is something that makes me feel a bit better about myself. However most of the time I just want to change the stupid file extension to .jsx and be happy again. As I already did with the index file, by the way.

I had the worst expierience with react-router.  Well, not the react-router itself – it’s cool. The package with the type definitions for react-router had some issues after last release, it wasn’t “compiling”! It took me some time to just work around it. I know, it’s the people that are the problem not the tool itself.

Following that rethoric I should not blame an assault rifle to be a shitty potato whipper. 

AK-47 sucks for whipping potatoes, alright? At least for me.

Source: https://www.youtube.com/watch?v=kMyPD1VKk60 (I know it’s not AK-47)

What should I do then? Maybe I’ll switch to the plain, old Javascript. On the other hand, I already have deleted all the code and start from scratch a few times during this project (really). It would be nice to finish this finally.

Not sure about it, what do you think? I guess It’s not that bad after all and I’m so lazy.

Problem of a day

My application requires to have an admin panel. Of course I wanted it to be a separate entry point for the website. What I mean by separate entry point is: Admin Panel is a pretty standalone part of the website – it can share some of the components with the user-facing part, but the root component, styles etc. will be different.

There are many possible ways for doing that. I could just create a new root component and depending on some conditions serve the admin component instead of the default one. Easy. I could totally do it. But where’s fun in that? I wanted to explore the react-router possibilities.

First thing I achieved very quickly (besides writing a bunch of components – cool stuff) is to set up routes with admin panel as a child of the main route, using the same root component.

const render = () => ReactDOM.render(<Provider store={store}>
          <HashRouter>
            {Routes}
          </HashRouter>
        </Provider>, document.getElementById('app'));
export const Routes = (<App>
  <Route exact path= "/dashboard" component={AdminPanel} />
  <Route exact path= "/" component={Home} />
</App>)

Cool, it was working fine. But I didn’t want it to have admin panel with all that end user related functions and styles! This solution fails my acceptance criteria. I want to have a normal, cool dashboard – the way my fellow portal redactors like it!

I thought about it a little and with my limited knowledge about React I came with a solution!

export function RenderAdminComponent(component: JSX.Element): () => JSX.Element {
  return () => <AdminApp>{component}</AdminApp>
}

export function RenderPublicComponent(component: JSX.Element): () => JSX.Element {
  return () => <App>{component}</App>
}

export const Routes = (<Switch>
  <Route exact path= "/dashboard" render={ RenderAdminComponent(<AdminPanel />) } />	
  <Route exact path= "/" render={ RenderPublicComponent(<Home />) } />
</Switch>)

Bang! It works perfectly. Is that a good React approach? Maybe it’s not the Routes responsibility to decide about how the component will be rendered. Ah, it works for me. Let’s move on.

The real stuff incoming

Those are my very first, initial and basic problems. Very educating. Also most of the time I have a huge fun with React. I only just got out of this project backend dungeon, so more fun stuff ahead of me, before I go down there again.

And that’s exciting, because it already feels like React and me are gonna be a very good friends!

It’s good to work with something new, instead of doing a bunch of the same stuff in cycles with different configuration. Try it yourself! Next time you draft a project for yourself, get out of the comfort zone. That’s where the fun is.

Just don’t whipp your potatoes with the AK-47 like me for god sake.

One Reply to “Whipping potatoes with AK-47 sucks”

Leave a Reply

Your email address will not be published. Required fields are marked *