Sunday, February 12, 2017

Heroes turned into Frankenstein (part II)

Part II. This is the second post in a series documenting my exploration of and attempt at learning angular2. Here is the first post.Styles. Once I had my app logging in and could route to specific modules, I had a set of learning tasks I wanted to accomplish. The first was to apply a set of styles. The go-to for styling for the lazy is of course Bootstrap. Someone has already established an angular2 bootstrap 4 angular npm module called ng2-bootstrap that offers up angular2 components. I decided to use this set of components to build the tour of heroes crud functionality found in the hero-crud module in my app. For some reason I forgot to do the "create" portion of the module. Maybe I'll add that later. Somewhere along the way I decided to look at angular material design and created a small sample app to play with it. I thought about converting the app to all material design. I spun up a quick angular-cli app and created a form on a card with a nav bar at top. I liked the look but it still feels kind of buggy: fields pre-filled by chrome are not recognized by the controls and the placeholder texts writes over the pre-fill text. I decided to stick with bootstrap for the learning app.

Components. When looking for components, I am usually thinking about the more complex set of components that offer a lot of data/ functionality such as data tables or treeviews. I started looking at datatable wrappers in angular. The two I ended up playing with are ng2-table from the same people to did the ng2-bootstrap, and angular2-datatable. At this point my backend was only serving up the few heroes I had started playing with as from the original angular tour of heroes. This data store only has 2 columns and I only populated about 10 rows from the original example. Knowing I wanted a better set of sample data I fell back to my old example schema I have used in prior posts that has a Company, Department, Employee set of tables. I usually populate with only a few rows, but I really want to test pagination on these tables. To create the data, I wrote a data generation app in groovy to spit out a bunch of inserts of randomly generated employees for my employee table. I next had to add the REST path through the backend app to the Employee data objects and ended up writing a full set of REST operations for employees. This became the basis for the remainder of the tables based work I did. I wired in the calls to employee REST service to my two table examples. I ended up with a good representation of how these two data table approaches work within the angular bootstrap ecosystem.

PrimeNG and Trees. I took a bit of a side trip into looking at the PrimeNG set of components newly released for angular 2. I was able to quickly add the PrimeNG table example. I'm not sure at this point if I am becoming proficient at adding components, but this seemed to come together rapidly for me. I was pretty happy with the functionality of the PrimeNG datatable and how easy it was to work with. I added row selection and coded events that responded to the selection. I also ended up playing with the treeview component which took me down another rabbit hole of how to pull a tree style structure from my REST back end. I ended up writing a REST service for Company rather than using the Employee service and added a GET operation ("/treenodes") to return JSON tailored for the PrimeNG Tree component. I look at the popular JSTree jQuery component as the gold standard for trees and it feels like the PrimeNG component, while functional, has room for improvement when compared to JSTree. I see some attempts at wrapping JSTree for angular 2 but they kind of looked like they were not ready for prime time.One more. I feel like I have one more post to go to cover my exploration into angular2 or angular. I did some form work, side trip into writing events (2-way binding), and cover a lot of ground in websockets and STOMP. I'll save this for the last post.