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.

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 …

reloading files … not fun

My workstation has a weird short circuit somewhere that has to be tracked down at the help desk. While I wait, I’ve tried to install my work on the department laptop. It has not been easy.

Luckily I pushed copies of what I was working into repositories for off-site storage. Unfortunately, those repositories were slightly out of date. I did not lose anything from the database archives, from what I can tell. The CakePHP 3 repo is about two weeks out of date. I convinced myself it was OK, since I spent two weeks trying to solve a dead end regarding JQuery, AJAX and calls back to the original CakePHP action. It should be easy, but I have not been able to track down the answer yet.

I cloned the archive repository locally and reloaded that SQL into the local copy of MySQL. That went fine, with some minor issues. You can’t load a table with foreign keys until after those related tables are loaded first. (Of course.) If the file is too big to load through phpMyAdmin’s 2 MB file limit, zip it and try again. (That answer was staring at me all day long. Very annoying, once I found it.) Everything looks fine, so I move on to the next action.

Next, I needed to reload the CakePHP repository. Installing CakePHP is a little more involved than cloning a repository. For starters, the docs say I need Composer to install, which is not loaded on the laptop. I’m not sure why that would be needed for a repository clone, but why not? It can’t hurt, and I might need it, so I load Composer using homebrew. I found my old instructions for installing composer, but I forgot the final instruction, about ignore dependencies. I’m sure I thought it was obvious at the time, but it’s better if I remember putting it in. Finally, Composer is loaded, updated and ready to go.

Next, I remember that CakePHP needs specific PHP extensions to run properly (mbstring, openssl, and intl). The one I did not have was the intl extension. I checked my notes again and found a very good description of how to install the intl extension. That’s done, finally. I’m ready for CakePHP.

I clone the CakePHP repository. When I try to load it, it bombs. I get an error about permissions denied in the logs folder. I remember this error from another installation, so I’m confident I can track down the issue. I also notice that the vendors directory is empty. Now that I have the composer.json file, I update Composer and run it again. The vendors directory is back, but I still have the permissions problem.

While checking the vendors directory, I went to the config directory for some reason. I noticed that my config/app.php file is missing. That’s odd. The app.php file controls database access, so I’m surprised to see it’s missing. I finally get access to the Time Machine drive of the old machine and copy the latest version of that app.php file over. The permissions problem is not solved, so I decide to start from the basic installation with a test site described on the CakePHP web pages.

I stumble around, comparing user/group settings on folders between the fresh install and the Time Machine backup. Eventually, I get them set to something that looks like it works. However, the links to the CakePHP css pages are not working. I remember this again from a previous install. This has to do with apache and how it blocks access to .htaccess files (or something like that.)

I track down the section in the CakePHP documentation regarding URL rewriting, so I figure out how to set apache properly to get it to read CakePHP’s .htaccess file. While there, I find a related link that tells me exactly how to fix the logs and tmp directory. I’m almost ready, except for the part where my archives have disappeared. Somehow, they tables I loaded disappeared at some point. Very strange. This is important since I built a small website that uses CakePHP to display the data in the archive tables. Next stop. What happened to the archive tables?

More composer notes

When I decided to investigate PHP frameworks, I discovered that lots of them required Composer  (https://getcomposer.org) for full installation. It makes sense, since Composer is a “dependency manager for PHP” and serves to collect everything needed for a PHP application. I like the idea of having something that can install everything needed at once, so I decided to install it.

I use Homebrew (http://brew.sh) as my package manager, so I had it install composer as a global package. It installed composer 1.0.0-alpha9. As described in another post, I ran into some problems installing CakePHP that were eventually resolved, more or less. I still had some trouble using Composer to install CakePHP, but I did get the pieces to install using a full CakePHP download from their site (http://cakephp.org). I was a little disappointed that Composer did not work as expected, but I got what I needed, so I moved on.

Eventually, I became comfortable enough with Bootstrap to install a Bootstrap plugin into CakePHP. The plugin instructions said to update the CakePHP composer.json file and then update it. I tried that, but I had trouble with parsing of a composer package version: “>=0.4.2 <1.0”. It looks fine, but my copy of Composer stopped over and over again. I installed a new local copy of composer and ran a dry run to see what would happen. This time, there were no freezes. I don’t like the idea of having local copies of composer sprinkled throughout the file system, so I did more research.

I tried using brew to update the composer package, but it would stop with errors. The error messages mentioned I did not have a copies of PHP in the brew directories. That’s true. I did not want to install additional copies of PHP when Apple provided an slightly order, but working copy. I managed to install composer before, but the trick I used then did not work now.

After reading the documentation (who does that?), I discovered that I could get composer to update itself. After running the self update, composer finally updated itself to the latest stable version. The syntax issue that caused problems before was fixed. I was able to update CakePHP to 3.0.5 and also successfully installed the Bootstrap plugin. On to the next issue.

CakePHP 3.0.2 installation

I ran into trouble setting up authentication with CakePHP 2.6.2. Given the choice between two branches, I usually choose the newer one. I decided it would be a good time to install CakePHP 3.0.2. There are some issues to keep in mind.

The composer file that was present at the end of April 2015 does not give a complete install. It chokes at the composer file for cakephp/migrations. For some reason, it can’t read what looks like a valid constraint string: “>=0.4.2 < 1.0”. The string looks fine, but I still decided to download the zipped version of the installer and move the vendor folder over to the original installed location by hand.

I then connected the install to my git application. I noticed that it connects to the original masters run by the CakePHP group. I need to remember not to push my changes to them, but to my own repository.

I opened the default CakePHP 3 page, in this case, bookmarker/index.php and saw a blank page. I forgot that I needed to set up a config/app.php page, which I did.

I saw a page with what I’m guessing is the CakePHP default style, with error messages about an inability to write to log files. I remembered that I had to allow write permissions to the tmp folder, so I did that. For OS X 10.9, try “sudo chgrp -R _www tmp; sudo chmod -R g=rwx tmp” inside the directory holding the Cake 3 files.

The default page appears, with more messages. I needed to add a salt value to config/app.php. (Done.) CakePHP could not connect to the database. I created the databases needed for the bookmarker tutorial applications and added that info to config/app.php. Once that new file was read, I finally saw the default page with no errors.

I ran through the basic tutorial and followed through to the authentication section. Authentication and authorization seem to be working, finally. This is good.

CakePHP 2.6.2 installation

I went ahead and installed CakePHP 2.6.2. (It bumped up one to 2.6.3 after I left for vacation. Sheesh.) I did not get a chance to try it out until I returned from my days off. I finally ran it, but I did got PHP warnings and failures.

After some investigation, it looks like I have a permission problem. I put the pages into the expected web root, but I also noticed that the group ownership looked wrong. I had similar problems with a Bootstrap installation in the same web root that were not solved until I fixed group ownership. I’ll try that fix first

> sudo chgrp -R wheel CakePHP

> sudo chmod -R g+w CakePHP

I still saw the same errors. A google search on one of the first error messages showed that I was correct in a general sense, but solved the issue in the wrong way. I needed to make sure the /app/tmp folder was writeable by the web server group, which is _www in this case

> sudo chgrp -R _www /app/tmp

> sudo chmod -R g=rwx /app/tmp

Now it works and I see more items I still have to fix.

PHP Frameworks: choosing one

I have a small project that I need to demo. I also want to learn PHP frameworks to get me in the right frame of mind to examine Ruby/Rails and/or Python/Django. From what I’ve found there are several PHP frameworks to choose from:

  • Zend Framework 2/3
    • It looks nice. it would not surprise me if it ties strongly into Zend Studio, which I don’t use. I don’t enjoy learning too many things at once, so I’ll pass.
  • CodeIgniter 2.2
    • Also a possibility, but it seems too allow too much. MVC encouraged, but not forced. Simple tempting allowed, but add-ons built to allow work with templating engines. This time, I do want to see a framework’s creation of MVC. Maybe next time.
  • Symfony
    • I like the idea of having a framework and stand-alone components (if needed). However, I see Twig used as the template engine. I am comfortable with Smarty and want to learn one new thing at a time. Maybe next time.
  • Laravel
    • This looks really good. It uses “Eloquent”, which is an ActiveRecord (Ruby/Rails) implementation in PHP. ActiveRecord makes CRUD so much easier.
    • It uses migrations. That’s a concept I first saw in Ruby/Rails, which acts something like version control for databases. Very, very cool for testing.
    • On the other hand, it uses Blade template engine. I’ll deal with a new template engine another time
    • Mcrypt required as part of the list of running php extensions. My stock version of php does not have Mcrypt installed. Installing it seems like a pain, so I’ll pass this time.

I’m going to try CakePHP for this small project. It has the MVC framework that I’ve used informally in the past. It can integrate nicely (I’m told) with Smarty. All I need to do now is install it.