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.

No comments: