Monday, September 24, 2018

Learning Ember in VS Code -- The First Event!


This is my continuing efforts to work with the Ember JS (www.emberjs.org) Framework. The expectation is to build a simple wish list of items.  Part one started the Ember application, part two started our first route and today we're actually going to have the application do something by having it respond to a mouse click.


Currently, the application shows a list. Not exactly ground breaking, or very useful.  So, what we need is to make the system respond to user interaction. Since this is the web, that interaction is a click event.  

To accomplish this, we add an action to the list item element in the items template.  The action helper takes in the name of the function to run, and the paramters for that function. for this function we'll name it "showItem" (and notice the casing for expected JavaScript styling) and pass it the item object that's referenced in the #each helper.

1
2
3
4
5
6
7
<h2>List of Items</h2>

<ul>
    {{#each model as |item|}}
    <li {{action "showItem" item}}><cite>{{item}}</cite></li>
    {{/each}}
</ul>

The default behavior for the action helper is to add a click event listener to the associated HTML element. This means that clicking the LI element will call the showPerson function from the items route class.

This means we need to modify the items route class file to add this function definition. For now, all we'll do is use an alert dialog to display the book title, later we'll make changes to display more information about the item. 

 1
2
3
4
5
6
7
8
9
10
11
12
import Route from '@ember/routing/route';

export default Route.extend({
    model(){
        return ['Friday', 'Dragon Riders of Pern', 'Foundation', 'Ringworld', 'RAMA'];
    }
    , actions: {
        showItem(item) {
            alert(item);
        }
    }
});

So, now our application is actually doing something.
Ember Alert
Next time, we'll be introducing how to share things appropriately. 

Monday, September 17, 2018

Learning Ember in VS Code -- The First Route


This is my continuing efforts to work with the Ember JS (www.emberjs.org) Framework. The expectation is to build a simple wish list of items.  Part one started the Ember application, while today's section works on adding the first route to the system, where we display a list of items.
The first thing to do is modify the Application.hbs file (found in app/templates/application.hbs) and replace its contents with the below. 

1
2
3
<h1>Wish List</h1>

{{outlet}}

Now, we want to add a route to the system, specifically a route which provides a list of products that need to be shown. Luckily, Ember has a number of generators that make the creation of boilerplate code for common tasks simple and easy.  What this means in practice is that we need to run the below command inside our current Ember application's directory


1
ember generate route items

This command generates the template seen when the user visits the "/items" route, the actual route logic in the application router, and a route object which fetches the model to be used by the template. And you get a unit test. 
So, our first step is to go manipulate the template.  Open the "items.hbs" file found in app/templates and and an h2 tag with the text "Items."  An {{outlet}} line should already exist, and needs to remain for right now. 
After saving, you will be able to navigate to http://localhost:4200/items, and see the new page.
Of course, a template is not much use without the model to display the details of.  So, let's open up the items.js file from the "app/routes" folder.
The boilerplate has an import statement, and the standard extension statement.  We need to add a "model" method. The important part here is that the model method supports any library that uses JavaScript promises. For now, though, we just want to return a simple array.  So, modify the code until it looks like the below:

1
2
3
4
5
6
7
import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return ['Friday', 'Dragon Riders of Pern', 'Foundation', 'Ringworld', 'RAMA'];
  }
});

Once that's changed, then the model is returning an array of items. In this case, a list of book titles.  Our next step is to tell Ember  how we want to display the array. We need to return to the items template, and add the code to make the program loop through the array and print its contents. 

1
2
3
4
5
6
7
<h2>Items</h2>

<ul>
    {{#each model as |item|}}
    <li><cite>{{item}}</cite></li>
    {{/each}}
</ul>

So, using the "each" helper, we create a list of book titles, also notice the use of the "CITE" tag to emphasis that his is a title. 

Monday, September 10, 2018

Learning Ember in VS Code -- Getting Started


This is a headache and a half.  I mean, I've just spent the past 15 years building ASP.Net applications utilizing WebForms, and was quite happily doing so.  But, an upcoming project has needs; and those needs aren't best served by the traditional WebForms model of ASP.Net.  So, I took a look around and started brainstorming. 

And discovered three big ones. 
  1. React JS (www.reactjs.org)
  2. Angular JS (www.angularjs.org)
  3. Ember JS (www.emberjs.org)

Angular JS has been replaced with just Angular (www.angular.io), which is more monolithic than before. Not a good idea for dealing with initially learning these things. 

But also looking at things, Facebook creates React and Google creates Angular, and Microsoft has .NET starter projects for both.  Which leads to good thoughts towards them. They appear more stable than other options.  But at the same time, they're made by Facebook and Google; and I'm certain those organizations use them in their own applications, which means that their needs are the primary driving force behind both libraries.

Which means that Ember kind of wins in my opinion.

In truth though, all three are kind of the same. You have to have Node.js installed, and then you can use NPM to get the relevant frameworks.  

Building a simple website is just as easy, as it follows a simple paradigm:
  1. Use NPM to perform base configuration 
  2. Add Class to handle things 
  3. Make class do something 
  4. compile and display in browser 

And while that's the 50,000 foot view, that's basically all there is in getting the page to say "Hello World." 

Of course, there's specific details involved, and like I said, I choose Ember.  

First thing is to install it. Which is really just launching Visual Studio Code, opening the terminal (CTRL+`) window and entering the following command: 
    npm install -g ember-cli 

Or just go to the marketplace, or more specifically this page: https://marketplace.visualstudio.com/items?itemName=felixrieseberg.vsc-ember-cli

To begin, open the embedded terminal found within VS Code (CTRL + `) and enter the command to generate a new Ember project (I'm calling mine "ember-learn":
    ember new ember-learn 

What happens, is that the Ember CLI creates a directory in your current working folder named whatever you called your project, and sets up a new Ember application inside of it. 

Once that's done, use the CD command to go into the folder.  

VS Code Example 1Then, since we're using VS Code, use the "Split Terminal" command to create a new terminal window. This is useful, as you will be able to interact with NPM and the EMBER CLI from one window, and have Ember serving the application from the other.  

Once you've split the terminal window, CD to the new folder from that second window and then enter the command:
    ember serve

Note: if you get a message stating "Running without permission to symlink will degrade build performance" then run either VS Code (or your command window) as an Administrator. 

Pointing a browser at the provided localhost port (http://localhost:4200) will get you the compiled website. 

VS Code Example 2

But since I'm wanting a "Hello World" thing, the page currently doesn't say that.  So we need to do a bit of editing to get there. 

And that means making an edit at the root of the application.  Ember provides a template for things that are always shown on the page. This file (application.hbs) is found in the "app/templates" folder. 

VS Code Example 3
I just replaced everything there with the following lines: 
1
2
3
4
<h1>Learning Ember</h1>
<h2>Hellow World</h2>

{{outlet}}
You need the "{{outlet}}" bit, as that's where the nested routes will be rendered.  Important bit there.

Anyways, the system should have detected the change, recompiled, and reloaded the page while you were saving.  



Monday, September 3, 2018

Simple Programmer -- Blogging Course


After my realization regarding the technical debt I was accruing, I made a greater effort to consume information about programming and being a programmer on both hard and soft skills.  One of the ways I did this was turning over my commute time (roughly 40 minutes each way) to listening to programmer based podcasts rather than the radio, and a second way was I bought a couple of books on development.  

What's amusing is that both things led me to John Sonmez.  At this time, I can't remember exactly which podcast it was, but they had an interview with him regarding learning, just being a good programmer and his blog/company Simple Programmer (https://simpleprogrammer.com). And I had also purchased his book The Complete Software Developer's Guide (https://www.amazon.com/dp/B073X6GNJ1) on my Kindle.

So of course I read the book and in the process surrendered my email for some additional content. Which of course got me on a mailing list. 

So here I am, reading this book, listening to podcasts, a number of which focused on "soft skills" and other things just trying to get caught back up, when an item from that mailing list appears offering me the option of enrolling in a email-based blogging course (https://simpleprogrammer.com/blog-course). 

I couldn't argue with the cost (Free!), so I thought why not. 

I mean I have a programming blog, and have had one for a decade now. The first post on it was December of 2006 and I posted quite regularly for the next 5 years, generating a bit over 200 posts until life (2 young kids and a wife) and work apparently overwhelmed my posting schedule.  As an unrelated aside, I also had a SF/Geek-life blog that had nearly twice that many posts in the same time frame. 

So, I had this blog that had not had any new content in seven years, I knew that the best way for me to internalize new information and knowledge was to write about it, and I had just signed up for a blogging course for programmers. 

I'm not going to lie, there is nothing truly new in this course that I'd not seen previously.  It's a solid, well thought out presentation of those elements, and condensed for ease of consumption. 

But I'm also fairly certain that I'm not quite exactly the desired audience as I had ran a blog in the past, and had let it lapse as the time I spent on it was rededicated to my family and completing customer projects at work.  And while I have no complaints regarding the extra time that it gave me with my kids, I also realized that writing the blog was something that kept me learning, and kept my brain engaged. 

Scott Berkun has a book entitled The Dance of the Possible: the mostly honest completely irreverent guide to creativity, and has this to say about creativity:
The word create is a verb. It’s an action. Creativity is best thought of in the same way—it’s something you can use while involved in an activity, like painting, writing, debating or dancing.
Berkun, Scott. The Dance of the Possible: the mostly honest completely irreverent guide to creativity (p. 9). Berkun Media LLC. Kindle Edition.
And this is what the blog was for me. It kept me creative and engaged. It was a verb aspect of how I learned about my craft.

Which is why I think every developer needs one, or a podcast, or a twitch stream, or something that allows them to create and to internalize as they learn.

Blog Widget by LinkWithin