Adventures with react and webpack

I decided it would be useful to relearn front-end web design/development. The big thing now is Javascript and various frameworks associated with it. I did not pick Angular, partly because of the schism between Angular 1.0 and Angular 2.0. “Schism” is a little harsh, but I don’t like how you have to pick a side to work with Angular and the people on the other side won’t help. It reminds me of the Python 2/3 split, but that’s slowly being healed.

Anyway, instead of Angular, I decided that Ember was the way to go. However, when I looked around, I did not see many Ember projects taking place. That’s my usual luck: given a choice in tech, I’ll pick the unpopular one.

I also started volunteering in an open source “collective”(?) for the presidential elections. I told them I had LAMP experience. They are interested in mobile experience. The first project I joined wanted React people. I did not know React, but I saw that it was popular, so I decided to learn it.

So, I’m learning React and React router, which seems necessary for SPAs. I decided to implement what I’ve learned in a little project for testing purposes. I have a group of friends that play board games. They like to get together over long weekends and play lots of games. Based on the game results, someone is declared that weekend’s winner and gets … a tournament cup. My thought was to build a React application that could track the tournament scoring.

So, I read a couple of React tutorials and I set up a new site following their model. My code almost matches theirs, but I can’t get it to load. I see that webpack can collect and load the files, so I include that. I (finally) get webpack working, after fixing many typos. Now I want to get a sample page working with bootstrap 3.

That turns out even more difficult. Fortunately, the collective had figured what to do, so I followed their config file and eventually made my file links to bootstrap work. Lots of additional stuff is required to get bootstrap to work properly.

  • babel: expected, since I’m using Javascript and webpack
  • style-loader and css-loader: What? Umm, OK. It works for the custom CSS file, but won’t load the bootstrap file properly
  • file-loader for the bootstrap glyphicons: Umm, OK.
  • url-loader for the woff2 and woff files: What are those?

It all works again, but wow, what a mess.

Advertisements

As usual, too many projects at once …

I wanted to learn node.js and a related framework to learn how to make single page applications (SPA). I’m not convinced they will replace traditional call-and-response websites with separate pages for actions, mainly because connection speeds can only get faster and page lag time will decrease, minimizing one good reason for the AJAX calls. However, I should know how to build an SPA. I did not want to get involved with Angular and its A/A2 schism because I have the uncanny ability to pick the losing side. I decided to wait on Angular and try Ember.

I installed node, ember and the related libraries. I went through the tutorial in the Ember website. I was doing fine until I hit the last section concerning handlebar helpers. I could not get it to work as expected. Usually, my problem has to do with typos, but I could not find one this time. I moved on to the next section on autocompleting components, but the tutorial site stopped working. I decided to search for other tutorials.

While searching, I realized that I needed some idea to develop into an SPA. I decided to try something like chess ratings only for other games. There’s a local game group that plays lots of games, so getting sample data would not be hard.

i started creating a page flow diagram with index cards. I also modeled some database tables (also with index cards). I keep running into the same stumbling block: authentication and authorization. Since everything lives on the client in an SPA, I’m not sure I should save session data to the client. An expiring token seems to be the way to go, but I have not found something simple to connect ember to some engine that creates those tokens, besides OAuth2 through Facebook / Google. That would be useful to learn, but it could be too much to learn all at once.

Authentication and authorization make me wonder if I should even consider creating an SPA. I know that SPAs slow down when hitting CPUs. I’m wondering how much they will slow down with constant data access caused by database calls. Hmm…

OR who cares about authentication for login. All that matters is authentication / authorization for use of the data inputs / outputs -> does that imply code to review authentication on the server, before writing to server?

So many more things to think about …