The Case for WebForms in a .NET Core world

I wanted to be able to write a great article on the power of WebForms. Of how they are just easier to use and more stable than MVC or RAZOR.  

I'm not going to lie, I love WebForms, and I've made WebForms dance to my tune for 15 years now. The typical complaints regarding lack of control of the rendered HTML or CSS, I've ignored and basically forced it to perform how I wanted. I understand WebForms. They work like WinForms in a context that to me makes sense. 

So, yes, I wanted to be able to write a great article on why we need them, why we should keep them, and other such things. 

And instead, while doing my research, and hunting for various numbers, I ran across a reference to SharePoint.

The reference in question was discussing a comparison between SharePoint, WebForms and the then just released MVC Framework, and held specific notations how WebForms had more structure than MVC but had none of the "out-of-the-box" functionality of SharePoint. The stance of the author (which I'm still not sure I agree with) was that WebForms had the drawbacks of both, with none of their features.  Like I said, I can't quite agree to that, but the article was enough to get me thinking. 

I mean, I remember SharePoint when it was first released. When it could be used to build websites. Or Intranets. Or whatever someone twisted it to do. 

The thing is, is that it has been years since I last saw a SharePoint install. None of my clients use it, the Network Architects for my company don't spec it, and it's not something I ever think about considering as an option for  my clients. SharePoint is a powerful tool, it integrates with basically every aspect of Office and Windows to produce a data integration tool for Enterprise. I'm not arguing that.  I'm stating that I haven't seen it in years, don't ever think about it, and have a general negative impression of it due to the complexity it invoked when I did last attempt to do something with it years ago. 

Just like MVC. 

When MVC first released, I poked at it a bit, then went back to work building things with WebForms. I didn't like it. It didn't behave the way I wanted to interact with an ASP.Net site. It was C#. And it had so may files to create any given page.  

I never really gave it a fair shot, because in the end building WebForms with VB.Net was faster. I was able to generate an application from design to production at speed and with ease. Which is typically a highly important aspect to things. After all, the three staples of software development are always cost, time and quality. Using WebForms, I was able to impact all three aspects positively and do so consistently.  

Which is the big case for WebForms. If you know what you're doing, working with them is fast; getting an application up and running is trivial. In my opinion, even getting the CSS to behave as expected is easy. 

And that's something meaningful.  Especially as a consultant, building software to solve other people's problems on their dime. 

Learning Ember -- Integrating Bootstrap

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, part three added a Click Event to the code while part four introduced components for code reuse. Today's section works on integrating Bootstrap into the framework. 

There is an Ember CLI element that does some of this work for you, but I just worked with integrating the artifacts from the Bootstrap website directly into my project.

To start with, I just worked with the CDN version of Bootstrap (https://getbootstrap.com) as I wanted to get it working before I worried about having downloaded artifacts. So, I first went to the getting started page for Bootstrap which provides the necessary links for CDN.

Then I opened up the index.html file to add the CDN references there, placing them between the content-for components for the "head" and "head-footer" in the HEAD section of this file.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>EmberLearn</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> {{content-for "head"}} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"; integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"; integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"; integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"; integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> {{content-for "head-footer"}} </head>

This means that the pages will include the Bootstrap elements as they're served. Now, my initial thought was that I'd be able to add the "container" DIV to this file, wrapping it around the content-for component for the body and body-footer. This didn't work. The EMBER content was served outside of the container DIV.

Instead, you need to open up the application.hbs, which is the global template for the Ember content, and add the container DIV here.

1 2 3 4 5

<div class="container"> <h1>Wish List</h1> {{outlet}} </div>

Elements like the NAVBAR could be implemented in either the index.html or application.hbs files.

But, this isn't the end of things. We now need to style our item-list component to display its content within the context of Bootstrap elements.

So, we open up the item-list component template file, and wrap the H2 element, and the UL elements within row DIVs and column DIVS

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="row"> <div class="col-12"> <h2>{{title}}</h2> </div> </div> <div class='row'> <div class="col-12"> <ul> {{#each items as |item|}} <li {{action "showItem" item}}><cite>{{item}}</cite></li> {{/each}} </ul> </div> </div>

This is a step in the right direction, but we also want the items to be displayed in a slightly better context as well. So, we'll switch the LI out for a DIV that implements the CARD class, and replace the UL with a DIV that implements he card-columns class. With a bit of CSS Styling, we end up with a nice set of boxed titles that still react to a user event.

Now, to make this server local assets for the Bootstrap libraries, for scenarios where you don't want functionality to change as things are updated, then you'd download the CSS and JS files and place them in the ASSETS folder of the application.

Then change the references to the CDN to reference "{{rootURL}}assets/" instead. Everything should just work at that point.

Learning Ember in VS Code -- Adding a Component

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 part three added a Click Event to the code. Today's section works on adding a component to the system to allow for shared user interfaces.

As a programmer, I have to say that Ember components are awesome. These are user interface elements that can be shared in different places in the application. This means either on separate and distinct pages or multiple times on the same web page.

In this situation, I want to turn my list of items into an "item-list" template. Again, Ember has a generator to perform the slog work of boilerplate coding for you.

1	ember generate component item-list

This generator creates:

1. a component JavaScript class (in app\components)
2. the component's template (in app\templates\components)
3. And of course a Unit Test

The first thing we need to do is move the code from our items route template over to our new item-list template. Next we want to parameterize the H2 element with the 'title' attribute. The final change is to modify the word model to the attribute "items."

The code in the item-list component template should read:

1 2 3 4 5 6 7

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

We also have to remember that the LI has an action associated with it. Thus, we need to move that action from the items route class to the item-list component class.

So, the item-list.js file needs to look like this:

1 2 3 4 5 6 7 8 9 10

import Component from '@ember/component'; export default Component.extend({ actions: { showItem(item) { alert(item); } } });

And the items.js file needs to end up looking like this:

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']; } });

Then we need to return to the item route template, and wire it up to display our new component element.

1	{{item-list title="List of Books" items=model}}

What's going on here, is that the double curly braces indicate that this is a component, specifically the "item-list" component. The title used is the value passed into that attribute, while the array of items to use is passed into the items attribute, and is the model of the particular page.

In truth, the end result of this should show the exact page as previously, but components are an important concept to know as they allow for code re-usability.

The next entry will see about including Bootstrap into the framework.

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.

Next time, we'll be introducing how to share things appropriately. 

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. 

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.  

Then, 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. 

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. 

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.  

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.