Shawty's Live Space

aka A Geek's coner of Cyberspace


1 Comment

2013 Year end

As I sit here on Christmas eve, and look over what I’ve done this year I realize I’ve not blogged anywhere near as much as I said I would. Beacuse of this, I’m really going to try my best to blog at least once a month in 2014, and if I don’t then feel free to shout at me on twitter via @shawty_ds

So what have I learned this year…. well technology wise I’ve really got stuck back into using non .NET tools.

For the past 4 to 6 months I’ve been working with “Laravel” a PHP framework that bears more than a passing resemblance to ASP.NET MVC, in fact it’s so similar that converting from .NET to PHP and back should be extremely easy for anyone who’s used to either of them.

On top of that I’ve covered NodeJS & MongoDB, and at the moment I’m playing with Angular.JS and Polymer.JS.

I’ve also been playing with websockets using Socket.IO and SignalR

In the .NET arena I’ve been working on some projects using Umbraco CMS and am now in the process of creating a set of tutorial videos about it for Pluralsight.

I didn’t however get to dig into F# so that’s still on my list to dig into in 2014.

Non technology wise…. My second syncfusion book, about the PostgreSQL open source database ( Downloadable for free, here ) has been released, I’ve joined and am helping to form a new start-up providing Viewable advertising solutions based in Newcastle – UK, and myself and the rest of team Lidnug, have taken the group way beyond the 50,000 member mark,  I’ve also grown my own business Digital Solutions UK for a second year as a Limited Company.

I’ve made some fantastic advances in GIS & Telemetry tracking on a long running project with a local transport and fleet management solutions company and am hoping that the flagship product of our joint venture will be available sometime next year, and 2014 may also see the re-surfacing of a project I was part of all the way back in 2001!

In my personal life, well this Christmas I’ll be celebrating my 5 year wedding anniversary with my lovely wife Samantha, and a total relationship time of 12 years together (and I hope to be sat here saying similar wonderful things in another 12 years). My limited company will be 2 years old in February 2014, and my time as a UK Development Community Leader will be approaching 4 years.

I have a busy Christmas catching up on video editing for my current Pluralsight course, so won’t get much “Play Time” so to speak, however since it’s Christmas I’m going to close off this post with a present for you all…

My first Technical Post in about 2 years :-)

How to set up and use Polymer.JS in ASP.NET MVC

Unless you’ve been living under a rock you can’t have failed to know that the brave new era of HTML5 is now upon us.

Browsers are being updated 2 or 3 times a month.

New java-script libs and modules are being created and released faster then us devs can learn them, and the Google’s, Microsoft’s and Apple’s of the world are releasing new stuff on a near daily basis.

Why am I telling you all something you already know?

Well, it’s got to the point where I really don’t pay much attention anymore unless something really catches my attention. In the past 2 months that something is “Polymer.JS” ( Main website here ) or more specifically a part of the HTML5 spec known as web components.

I’m not going to delve too much into that at the moment, web components and everything surrounding it is a huge topic in it’s own right. In this small snippet I’m going to concentrate on the “Shadow DOM”

“Shadow DOM” , whats that then Shawty?

The “Shadow DOM” is as the name suggests, a DOM within a DOM. More specifically it’s a miniture DOM that exists inside a html tags internal space.

For example, look at the new <audio>, <video> and <input> tags that are now available in HTML5.

If you add one of these tags into an empty document and examine it using the chrome developer tools, all you’ll see is a standard HTML tag, something like the following:

Chrome dev tools showing tag with no shadow dom

if you now go into the chrome debugger options, then enable “Shadow DOM” viewing

IMage showing settings cod in Chrome dev tools

Image showing Chrome Dev tools options

Then go back to the element view, you’ll now see that the tag has an internal “Document Fragment” similar to what you might see if you where debugging an Iframe tag.

Chrome dev tools showing tag with shadow dom

(If you don’t see things exactly as shown in the pictures above, then you need to go into chrome://flags in your browser, scroll down until you find “Enable Experimental Web Features” then click to enable it)

 

This ability to wrap associated HTML & JavaScript up into one single entity, is what “Shadow DOM” and web components are all about.

Imagine for a second that you where designing an app that required you to list a personnel record, and that personnel record had to follow a specific format. Now further imagine that you had to list these records in a repeating list.

If your using ASP.NET MVC, you might be tempted to create an HTML partial view, then retrieve the data you need to make that list, and then repetitively loop over that data in your razor view, before finally rendering the page.

Let’s then suppose that the format of that record changes. You then have to go work with a designer to change the look and feel, and this takes both a front-end UI/UX dev and a back-end dev. Two people are needed to ensure that no damage is done to the razor code, and that the UI/UX design is done the way it needs to be.

Let’s then further suppose that the business suddenly decides that there moving from .NET MVC to Laravel PHP MVC , while Laravel has a very similar model to .NET MVC it’s by no means identical, so you find yourself then having to “Re-Engineer” how you did the HTML Partial so that it’s compatible with Laravel while still working the same way.

This is the exact problem that Web Components and Polymer.JS are designed to solve.

Note also, Polymer.JS is not just all about “Shadow DOM” it’s about making new emerging HTML5 web technologies available now, even before the browsers are actually supporting them. This means that many more awesome technologies other than “Web Components” and “Shadow DOM” are now available today, right here in the current crop of modern browsers, and you can start using them right away.

How does Polymer fit into ASP.NET MVC?

Well first off you need to download “Polymer.JS” and “Platform.JS” from their respective github repository’s. The recommended way is actually to use Bower from a Linux shell command line, but since where doing this in .NET and there is no NuGet package yet then the install needs to be performed manually.

Once you have the two required JavaScript files, add them into a new ASP.NET MVC project just as you would with any other JS lib. It’s up to you how you structure your code, but for me I generally have a standard _Layout.cshtml file which I add my CSS at the top, and my JS at the bottom just before the closing body tag.

My JS files normally go in a folder called scripts, and my CSS files in a folder called styles, off the root of my project.

Once you’ve created your MVC APP and added the two new JS files, you then need to create a simple controller that returns a simple single page view for your app using your layout template.

I’m not going to go over how to do this, because it’s all really basic stuff, and this post is not a .NET MVC tutorial. If you don’t know how to do this basic stuff with .NET MVC then please take a look at the Official ASP.NET MVC website and learn from the tutorials there before you continue.

Once you have a new MVC site and your page has “Polymer.JS” and “Platform.JS” linked to it, then it’s time to create your first web component.

ALL custom components MUST have a dash ‘-’ in thier name. In my case I call all of mine ‘ds-xxxxxxxxx’ where ‘ds’ stands for ‘Digital Solutions’ (My Company) and the xxxxxx is the component name.

Create a new html file in your scripts directory and call this file

ds-mycomponent.html

when the file opens in the visual studio editor, add the following code to it


<link rel="import" href="polymer.html">

<polymer-element name="ds-mycomponent" attributes="recordid age name role">
  <template>
    <h2>Employee Record</h2>
    <span><b>Record Id : </b>{{recordid}}</span><br/>
    <span><b>Name : </b>{{name}}</span><br/>
    <span><bgt;Role : </b>{{role}}</span><br/>
    <span><b>Age : </b>{{age}}</span><br />
  </template>
  <script>
    Polymer('ds-mycomponent', {
      recordid: 0,
      age: 0,
      name: "Undefined",
      role: "Undefined"
    });
</script>
</polymer-element>

Make sure this file is saved in your scripts folder, then at the bottom of your layout template, right after you’ve added all your JS files, add the following single line.


<link rel="import" href="@Url.Content("~/scripts/ds-mycomponent.html")">

Once you’ve done that, then open the view file you created for your controller action, and somewhere within that file, add the following code:


<ds-mycomponent recordid="0" name="Fred" role="Dev" age="21"></ds-mycomponent>

If everything has gone to plan, you should see a H2 tag, followed by a number of span tags below it, all filled in with the details you supplied in the tag attributes.

If you view the element in chrome as I described above (Assuming you have “Experimental Web Technologies” enabled in your chrome://flags page) then you should see the shadow DOM and encapsulation of your web component in the page as described earlier.

I’m currently on putting a full MVC Demo APP together, showing in full detail how to use this stuff and I will upload it to my GitHub account in due course for you to download and play with.

I’m sure however that you can already see in your minds eye, the benefit this stuff brings, and as more and more browsers enable things like Shadow DOM support, polymer will simply become the layer above it all that provides universal support across the browser market, to make this easy.

You can find 2 very good you tube videos demonstrating this technology here

https://www.youtube.com/watch?v=fqULJBBEVQE

https://www.youtube.com/watch?v=0g0oOOT86NY

and much more info on the official project polymer web site

http://www.polymer-project.org/

That’s all I have for you now, so I hope you all have a very happy Holiday Season, and I’ll be back in January with the first of my monthly posts.

seasons-greetings


Leave a comment

Yes I am still alive……

and yes, I do know that it’s nearly the middle of the year and this is my first post of 2013. (I seem to be getting later with these things every year…)

So what’s going on in shawty’s world….
Continue reading


Leave a comment

Help needed for a friend.

OLYMPUS DIGITAL CAMERAIv’e just found out in the past week, that a very dear friend of mine in Canada is turning to the internet for help.

It’s times like this, that I believe the global community at large is best placed to help people, if for no other reason than to increase the exposure of the individual concerned.

Continue reading


2 Comments

DDD North 2012 – Post event

In my last post I mentioned that DDD North 2 was fast approaching.

Well as predicted it did not disappoint.  This year I was presenting on the subject of Spatial SQL, which almost had to be cancelled due to a failed Microsoft Security update to my Laptop just before I was due to go on.

Continue reading


Leave a comment

DDD North 2012

Most of you in the UK development community will be aware that DDD North is quickly approaching, and you may remember I wrote about the first ever occurrence of this event last year when I attended it at the university of Sunderland.

Continue reading

Follow

Get every new post delivered to your Inbox.

Join 616 other followers