Moved blog

This blog has been copied and will continue at

http://fullstacksoftware.blog

My First React App - code review changes

Full Stack Software Development Blog

Fortunately for me a couple of guys on my team at work are fluent in React. I asked them to do a code review and got a lot of good feedback. As a result of the feedback the step-10-code-review-refactor branch at https://github.com/gpratte/react-todo-list has the following changes

• Use .jsx extension for components
• Use lodash for better performance for map, filter, etc.
• Consider using destructuring syntax to avoid constantly referencing state or props, e.g. const { foo, bar, baz } = this.state
• Use lodash for better performance for map, filter, etc.
• Consistently use arrow methods vs regular old functions
• Count should probably be in the component state
• Unless there are things like dashes/dots, quotes are unnecessary for object keys
• With ES2015 you could use template literal for text substitution
• Spelled concatenate wrong
• Avoid creating new functions in render, this is bad for scalability as each render will create new functions that need to be garbage collected

My First React App - a TODO list

Full Stack Software Development Blog

I previously blogged about coding the reactjs.org's tutorial.

Since then I watched Wes Bos' React For Beginners course.

The next step was to write my own react app from scratch - a todo list which can be found at https://github.com/gpratte/react-todo-list.

The stumbling blocks were

• handing events
• state and properties

I went back and reviewed these topics more than once in both the reactjs.org tutorial and the Wes Bos course.

I also read some articles found from internet searching (e.g. How to Display a List in React).

As is my modus operandi, when developing new code, I built up the tutorial on branches.

Here are the branches:

• step-01-create-development-environment
• step-02-ui-markup
• step-03-render-html
• step-04-add-todo
• step-05-remove-todo
• step-06-update-text
• step-07-concatinate-text
• step-08-mark-done
• step-09-hide-done

Learning React https://reactjs.org/

Full Stack Software Development Blog

As you can see from previous blogs I was learning Angular for my front end.I am starting at a new company and they use React for their front end. Hence I am pivoting to use React.

I worked my way through the Tutorial: Intro to React.

See my github repo for the code at https://github.com/gpratte/react-tic-tac-toe-tutorial-v16

As is my modus operandi when developing new code I built up the tutorial on branches.

Here are the branches:

• step-1-setup-for-the-tutorial
• step-2-overview-making-an-interactive-component
• step-3-lifting-state-up
• step-4-function-components
• step-5-taking-turns
• step-6-declaring-a-winner
• step-7-lifting-state-up-again
• step-8-showing-the-past-moves
• step-9-implementing-time-travel

Algorithm Performance

Full Stack Software Development Blog

I am presenting at the inaugural meeting of the Austin Algorithms Meetup group.

https://www.meetup.com/Austin-Algorithms-Meetup/

I've put together a presentation on algorithm performance and Big O.

I used https://revealjs.com to create the presentation. I committed the code to GitHub and deployed it to Heroku.

If you cannot come to the meeting then there are a few ways to view the presentation.

On Heroku for a limit time at https://algorithm-big-o.herokuapp.com/
Note: that Heroku may take up to a minute (or more) to load the website

On GitHub clone https://github.com/gpratte/algorithm-performance-presentation.git and then open index.html in a browser.

View the PDF at https://github.com/gpratte/algorithm-performance-presentation/blob/master/pdf/algorithm-performance.pdf

More embedding dependencies when testing in Spring Boot

Full Stack Software Development Blog

In my last blog I wrote about mocking dependencies when running tests. Since then I've added Apache's Qpid (https://qpid.apache.org/) to mock out RabbitMQ.

The following is from the top of the readme in my github repository for the PoC (see https://github.com/gpratte/spring-boot-acceptance-test-mocks)

Embedding dependencies when testing in Spring Boot

Full Stack Software Development Blog

I am working on a proof of concept (POC) for embedding dependencies in a Spring Boot server.

The following is from the top of the readme in my github repository for the POC.

Java Functional Programming

Full Stack Software Development Blog

I can make an analogy of my knowledge of Java functional programming to fluency in a foreign language - I can read it but have had little to no practice writing it.

I spent the last couple of days getting hands on experience using lambdas and streams.

Here is the reading I did.

Java Tutorial Lambda Expressions

Java Tutorial Aggregate Operations (Streams)

Lambda Expressions and Functional Interfaces: Tips and Best Practices

Functional Interfaces in Java 8

THE ULTIMATE 30-MINUTE CODING WORKOUT - STREAMS & LAMBDA EXPRESSIONS BY EXAMPLES

CICD with CircleCI and Heroku

Full Stack Software Development Blog

The final task to finishing off the server work is to wire up continuous integration and continuous deployment (CICD). I already have the CI piece of it working (see previous blog). Now to do the CD piece.

Step 1. Deploy Spring Boot application to Heroku

I followed the steps in the getting started on Heroku with Java tutorial.
See https://devcenter.heroku.com/articles/getting-started-with-java

The only thing of interest is the Procfile

web: java -jar application/target/texastoc-application-1.0.jar --server.port=$PORT --spring.profiles.active=test com.texastoc.Application

As you can see the Spring Boot application is run as a jar.
Set the server port as instructed by Heroku.
Set the spring.profiles.active to test so the it would use the embedded H2 database (for now).

Step 2. Integrate CircleCI to deploy to Heroku

Next I followed the CircleCI instructions to integrate with Heroku.
See https://circleci.com/integrations/heroku/

First I had to set a couple environment variables

• HEROKU_APP_NAME
• HEROKU_API_KEY

The big change is in the .circleci/config.yml file to deploy after building.
See https://github.com/gpratte/texastoc-v2-spring-boot/blob/master/.circleci/config.yml

Step 3. Spring Actuator

I needed to verify the deployment. What better way than to add a new endpoint (or two) to the server, push to github master and then curl the endpoint on the server deployed to Heroku.

I added Spring Actuator and curled the health endpoint.
See https://docs.spring.io/spring-boot/docs/current/reference/html/production-ready.html to know more about Spring Actuator.

JWT Auth for Spring Boot

Full Stack Software Development Blog

I took what I learned in my last blog about JWT Authentication and Authorization and applied it to my Spring Boot server application.

Most of the time was spent updating the integration tests. Almost every endpoint now requires authentication. The test were enhanced to login a player which returns a token. The token is then passed in the HTTP Authorization header.

Another departure from the proof of concept in my last blog is to

• use the player table instead of the user table 
• use email instead of username

See branch 37-jwt-auth at TexasTOC v2 Spring Boot

JWT Authentication and Authorization with Spring Security

Full Stack Software Development Blog


Worked through how to implement Authentication and Authorization (A&A) using JSON Web Token (JWT) with Spring Security.

Instead of blogging about it here I put together a proof of concept (POC) in github. The readme tells all.

See the https://github.com/gpratte/jwtauth repo.

CircleCI for continuous integration

Full Stack Software Development Blog

Using the free plan for CircleCI to build and run tests.

Here were the steps I followed

Chose the CircleCI free plan and use my github credentials to log into CircleCI.

Chose the texastoc-v2-spring-boot github repo for CircleCI to use. CircleCI added a key to this repo.


Followed the CircleCI directions to

• add a .circleci directory to my project.
• add a config.yml in the .circleci directory for a Java maven project

Now when I push to any branch CircleCI it downloads dependencies, compiles and run the tests.

Of course there were problems :)

Problem 1

My Java project is split into two modules: application and integration. That way I keep my integration tests separate from the application code. The integration module has a dependency on the application module.

I did not have a problem running the tests locally either in IntelliJ or using maven on the command line. But CircleCI choked on the integration module having a dependency on the application module. CircleCI actually wanted the application module as a library for the integration module to use.

I changed the config.yml so that the application module created a library.

Problem 2

When CircleCI attempted to run the test there was an obscure error.

I followed the instructions to add an ssh key to github which allowed me to run CircleCI in ssh mode. I was able to ssh into the build and look at the dump file. I googled the error and found a workaround that I added to my maven pom.xml.

Of course I added a comment to the pom.xml to a link to the stackoverflow solution to the file.

https://stackoverflow.com/questions/50661648/spring-boot-fails-to-run-maven-surefire-plugin-classnotfoundexception-org-apache

Server APIs coded

Full Stack Software Development Blog

Finished coding the logic for the server APIs (or as finished as any API is before the client starts calling it).

In one stretch of 10 days wrote 5000 lines of code (loc). 3000 were for the tests and 2000 for the application. Add code was done via TDD. JUnit for the Java classess/methods and Cucumber to exercise the APIs.

Now need to revisit the Authentication and Authorization (A&A). Since it is a REST service I will use a JWT token.

And of course the A&A will be done via TDD :)