Technology Ninja. Loving Father.

Home

AngularJS 2.0 looks impressive

Here is a snapshot of the new changes/features.  The Angular team does not have a timeframe for their releases but there are a lot of things in this roadmap that look delicious.

Designed for the future

We’re designing AngularJS 2 for the way the world will look when we believe folks will use it.  In particular, this means targeting modern browsers and using ECMAScript 6.

Modern Browsers

Modern browsers means the set of browsers known as ‘evergreen’ or always automatically updated to the latest version.  Building for these browsers let us drop many hacks and workarounds that make AngularJS harder to use and develop on than it needs to be.
The set currently includes Chrome, FireFox, Opera, Safari, and IE10/11.  On mobile, we’ll support something close to the list of Chrome on Android, iOS 6+, Windows Phone 8+ and Firefox mobile.  We’re looking into supporting older versions of Android, but the jury is still out.

 

Yes, there are still older browsers in use, but we’re targeting these newer models as they will be the primary ones in use by the time AngularJS 2 is ready and you good developers have had time to build apps on it.

ECMAScript 6+ (design)

All code in AngularJS 2 is already being written in ES6.  As ES6 doesn’t run in browsers today, we’re using the Traceur compiler to generate the nice ES5 that runs everywhere.  We’re working with the Traceur team to build support for a few extensions like annotations and assertions.
Don’t worry.  Though AngularJS will be in ES6, you can still write in ES5 if you don’t want to upgrade.  The compiler generates readable JS and there are human-sensible analogs for the extensions.  See the design doc for more info.

Faster

Faster change detection (design)

AngularJS apps are built around data-binding between DOM and JS objects.  The speed of AngularJS apps is driven largely by the underlying change detection mechanism we use.  We’ve talked at length on how we hoped to make this faster by using Object.observe() when it becomes available in Chrome M35.  And we will!
After some hard analysis (detailed in the doc), however, we’ve also found that we can make this much faster and more memory efficient even before this native change detection hits browsers.  Buttery-smooth app buttery-butterness is around the corner.

Instrumented (design)

The other half of the performance equation is the code that you write.  For this, we’ll provide high resolution timing details of where time gets spent in your application.  You can see in that this is a goal in the Change Detection design, but we’ll directly support this through a new Angular-wide logging service called diary.js.

Modular

When we released AngularJS 1.0, the features were in a take-it-or-leave-it single package.  You incur the download price for every piece whether you use it or not.  Though the whole of AngularJS is very small by desktop app standards, this can make a big difference on mobile devices.
One interesting thing we noticed was that when we split out the $route into a separate library, several innovative replacements popped up.
For performance and to enable innovation, our goal is that almost every piece of AngularJS should be optional, replaceable, and even used in other non-AngularJS frameworks.  You’ll be able to pick and choose the parts you like and write or select others that you like better.

Other Performance topics

Though there are no designs yet, there are many other areas of performance optimization we’ll include in AngularJS.  From increasing first-load time with pre-parsed templates to ensuring silky smooth 60 frames per second animations, we’ll invest heavily on a fully optimized user experience.  Please help us by highlighting areas where we should focus and techniques you can contribute to the shipping solution.

Simpler

Dependency Injection (design)

Dependency Injection is still a key differentiator between AngularJS and other client side frameworks in eliminating much of your application’s wiring code and making testability-by-default a reality.  Though we’ve enjoyed these benefits in building our applications, we’re dissatisfied with the current implementation.  We can make it less complex and more capable at the same time.
We’ll see a less complex DI by eliminating the config phase, simplifying the syntax by using declarative-style ES6+ annotations instead of imperative.  We’ll enjoy greater capabilities by integrating DI with module loading through ES6 Modules.  We’ll also see the ability to lazily-load parts of our JS through child injectors.
The doc linked above has our initial thoughts, but this is one part of AngularJS 2 that you can try today.  See the repo for current details on the implementation.

Templating and Directives (design)

The ability to specify templates directly in HTML and extend its syntax are the bread and butter of AngularJS.  We have some lofty goals for AngularJS’s template compiler in 2.  Namely:
  • Simplify the directive API
  • Integrate with other component frameworks using web standards
  • Improve performance
  • Allow tools like IDEs to analyze and validate templates
We’re so excited about these new bits that we can hardly wait to show them off.  There’s too much good stuff to extract into a summary, so please just go straight to the design doc to find out more.

More capable

Touch animations (design)

Users are accustomed to certain touch aware usage patterns. E.g. scroll through a list using their finger, circle through pictures in a carousel, remove list entries by swiping them away. However:
  • Current implementations of carousel, infinite scrolling, … don’t share a common core and by this have a lot of redundancy and different approaches.
  • Current implementations mostly don’t provide an option to use native scroll events, as older browsers and also some current browsers don’t support them well. However, by this they prevent the optimal performance on new devices.
We want to give these scenarios first-class support for the best user experiences possible in your applications.

Router (design)

The initial AngularJS router was designed to handle just a few simple cases. As AngularJS grew, we’ve slowly added more features. However, the underlying design is ill-suited to be extended much further.
We’re taking a careful look at known use cases and other router implementations across many application frameworks so we can deliver a simple yet extensible router that should fit the widest set of applications.
A few cases that we’re particularly keen on supporting include:
  • State-based routing
  • Integration with authentication and authorization
  • Optionally preserving state of some views.  Particularly needed for mobile!

Persistence (design)

Beyond AngularJS’s humble $http, many developers have desired a higher level abstraction for working with data from servers and local persistent data in the browser.
Mobile apps need to work in an “always offline” mode with syn to the server.  RESTful services need more than we’ve provided in $resource.  Some data can be updated in batches while some needs a continuous streaming model.
In this new persistence layer, we’ll provide clean structure for these cases and take much more out of the boilerplate currently necessary.

Q&A

When will it be done?

If you’ve been with us through the 1.2 announcement, you know that we don’t know. :)  Though we’re just posting the design docs now, we’re already prototyping many of the modules.  Dependency Injection and Zone.js appear to be usable.  All the work will be done on GitHub and we’ll continue to capture weekly meeting notes so you can follow along.

What will it be like to port an AngularJS 1.x application to AngularJS 2?

As AngularJS 2 is still in development, we honestly don’t know.  In our imagination, porting will be fairly straightforward but not free.  Taking advantage of ES6 will likely be the largest part of the job.   Templates will be largely the same with some mostly-mechanical find and replace exercises.  Your controllers contain your business logic and not much if any AngularJS API today.  Those should port easily.  The parts that will require the most thinking will be your use of Modules and Directives.

Is AngularJS 2 a replacement for mobile tech like PhoneGap or Ionic Framework?

No, AngularJS is still just the core framework.  You might still want libraries like Ionic for mobile-optimized CSS/JS components and tools like PhoneGap for app packaging and native API access.

How does AngularJS 2 relate to AngularDart?

When porting AngularJS to the Dart language, we build a new version of Angular using all the learnings we’d acquired to date.  Many of the improvements discussed in this document like improved Directive concepts and syntax and class/annotation-based DI are already present there.
While the implementation isn’t what we’ll arrive at for 2, it’s a great preview of what’s to come.

 

We’ll be upgrading AngularDart as we build AngularJS 2 so folks who prefer the Dart language can enjoy the same benefits as folks on JS.  Our goal is that there will be a single framework with your choice of language.

And this is why I hate politics..such a dirty game

Mark Dayton and Minnesota Lawmakers playing games

Minnesota residents hit another roadblock in getting the Minnesota Vikings a new stadium on Friday

“Gov. Mark Dayton’s veto of a high-priority GOP tax bill Friday drew an angry response from legislative leaders and concerns that the ill will could persist through Monday’s climactic vote on a Vikings stadium.”

“He vetoed our highest priority,” said Ortman said, who also is deputy majority leader. “I think there will be consequences. I think that he has lost the trust of many of my colleagues in the Legislature.”

So basically because one party didn’t get their way..everyone is going to pay for it and this stadium deal is at risk. Our forefathers are rolling over in their graves right now.

Javascript style guides

one of my favorite developers Addy Osmani has published a blog article on Javascript Style guides.

I don’t have a specific guide that I follow but I do have mental guidelines.

Here are 6 style guides to reference:

  1. Idiomatic.js. This is not only highly recommended and very comprehensive, but is also the style guide we’ve adopted for several of the projects I’m involved in. It includes contributions by jQuery core contributor Rick Waldron, jsPerf contributor Mathias Bynens and many other experienced JS devs in the community. Not all developers agree 100% with the practices it advocates, but that’s the great thing about a forkable style guide – it’s easy to adapt to your own needs.

  2. jQuery Core Style Guide. Perhaps the most popular style guide modern JS developers are aware of, it is used by the jQuery core team, jQuery UI, QUnit and many other projects. Rick Waldron once again had a hand in this as have Adam Sontag and John Resig, also of jQuery fame.

  3. Google JavaScript Style Guide. Written by former Google JavaScript developers such as Robby Walker (Closure Linter), this contains several readability best practices that those from a particularly traditional software engineering background will appreciate. Further comments on it can be found here.

  4. Dojo Style Guide Another very comprehensive alternative by the people that brought us the excellent dojo toolkit. Interestingly this guide is based on the structure of the Java programming conventions guide. If you like what you see, you might also appreciate dojo’s inline documentation sguide, which remains my favorite style of inline commenting in JS.

  5. Aloha Editor JavaScript Style Guide This guide comes from the authors of the relatively non-trivial contentEditable-based Aloha Editor. Whilst it recommends the jQuery style guide, it has some useful (minor) additions such as how they suggest styling AMD modules.

  6. Crock’s Code Conventions For JavaScript Another good guide, although perhaps not as detailed example-wise as others. I feel this has been superseded by Idiomatic.js, but if you strongly disagree with it or the jQuery core style guide, this is a much recommended fallback.

Automatically send behavior-based campaigns with Performable

No matter how much pleasure you get from putting together a solid, subscriber-focused email marketing campaign (hah!), there’s probably a point where you go, “By golly, I wish I could automate parts of this process.” Okay, so email campaigns are never going to write themselves, but when it comes to lining up emails to send at the most effective time, then both our app and our friends at Performable Analytics are here to help with triggered campaigns.

Last year, we released autoresponders to allow you to send campaigns when an event occurred within your subscriber list. Some of these campaigns were things like follow-up emails immediately after someone joined to your list, or an email offer automatically sent a week before a subscriber’s birthday. Now, Performable have taken this one massive step further with Engage, a service which extends the autoresponders in your Campaign Monitor account to schedule campaigns based on events occurring on your site. For most of us, it’s called “Wow, I just got a reminder email after abandoning my online shopping cart!” For the propeller-heads, it’s called behavioral marketing.

Starting condition in Performable Engage

This might all seem pretty fiddly, however the folks at Performable have smoothed out the process of connecting sites to their marketing analytics service, then in turn, connecting Engage to your Campaign Monitor account. For example, lets go back to the earlier shopping cart scenario. Lets say you’ve got Performable Engage rolling and a basic, ‘New subscriber signs up’ autoresponder (or two) in your account. You then want to send an email to folks who have signed up as customers, added an item to their online cart, but never completed their purchase. You also want to delay the email being sent by a couple of days and heck, send a follow-up email if additional criteria is met. Here’s what this workflow would look like in Performable Engage (click to enlarge):

Flow featuring multiple emails

Wow, that’s some pretty clever email marketing right there. Now, imagine extending this to folks who have signed up to receive your cracking latest album of ambient chiptunes, but haven’t gone on to download it. Or with Performable’s Zendesk integration, being able to contact people who have lodged a ticket with you, but haven’t logged back into their account for your web app. How crazy automated is that?

Engage stats

Performable Engage is also backed up by solid reports, both from within Performable and your Campaign Monitor account. Engage will tell you how many emails have sent and are scheduled to go (alongside Performable’s regular lifecycle marketing metrics) and we’ll keep tabs on opens, clicks and more via your autoresponder reports.

Based on this model, you may be well keen to check out our monthly pricing – with unlimited autoresponders and campaigns bundled into most plans, it’s simply less stress.

Of course, in the words of Master Splinter, with great power comes great responsibility. Just as most folk were sensible enough to not go mad with plain ol’ autoresponders, this kind of triggered campaign should be used with a bit of humanity. In short, to gently encourage subscribers to come visit you again, over being, well, annoying.

Finally, the folks at Performable have extended readers like you a 50% discount on their small business plans. To see if its suite of marketing analytics and email automation tools are suitable for your site, trial Performable for free and start scheduling ‘em emails.

Convention Based Localization With ASP.NET MVC – Davy Brion’s Blog

A feature of ASP.NET MVC that i really like is that when you use the LabelFor extension method in a strongly-typed view, the LabelFor implementation will try to retrieve and use metadata for the property you're creating a label for. For instance:
@Html.LabelFor(m => m.SomeProperty)

This will generate an HTML label for the SomeProperty property of your model. If you need localized views, you can annotate the property in your model like this:
[Display(ResourceType = typeof(Resources), Name = "Res…

Projection Screen Basics

Like Andrew, I also would like to have a projection setup someday. There’s simply no replacement for the sheer envelopment that a projector can bring with a 100″+ screen. Unfortunately, my current abode isn’t ideal, but I plan to set up a dedicated screening room in my next residence so I like to stay informed on the technology. Following on their HD projector overview, HD Guru goes over the various projection screens available (and yes, you do need a screen and not just some painted wall).

A few days ago I wrote an article espousing the virtues of front projection. I am an unabashed fan and hopelessly biased towards PJs. But to get the best performance out of a projector, you’re going to need a screen.

And this is the point where I lose the audience.

Still with me? Screens may seem boring, and there’s a lot to learn, but if you’re spending any amount of money on a projector you owe it to yourself to get a screen that lets you get the most from your new purchase.

HD Guru

Hover on “Everything But”

Adding a hover state to an element is durn easy. Let’s use an opacity change as an example:

div {
   opacity: 1.0;
}
div:hover {
   opacity: 0.5;
}

But what if we want to have that hover state apply to everything but the element actually being hovered over? (e.g. other adjacent sibling divs)

Let’s assume this basic HTML:

<section class="parent">
  <div></div>
  <div></div>
  <div></div>
</section>

We’ll apply the current CSS properties to all the children of the parent when the parent is in the hover state.

.parent:hover > div {
  opacity: 0.5;
}

Then when the parent is hovered and the individual div is hovered, we bump the opacity back up, giving the final effect we are looking for.

.parent:hover > div:hover {
  opacity: 1.0;
}

Real World?

A similar kind of thing is in the Twitter for Mac app on individual tweets:

Demo

This idea can be extended into multiple levels of depth. Here is an example of three “lists.” All list items have full opacity in their regular state, but as you roll over the lists, the currently hovered list is slightly more opaque than then others, and the currently hovered list item is fully opaque.

View Demo

And yes, old you-know-who browsers don’t do :hover on anything but anchor links. If it’s mission critical, use JavaScript to detect mouseenter events on them and apply/remove class names.

The wages of sin: Proper and improper usage of abstracting an OR/M

Originally posted at 3/11/2011

This time, this is a review of the Sharp Commerce application. Again, I have stumbled upon the application by pure chance, and I have very little notion about who wrote it.

In this case, I want to focus on the ProductRepository:

image

In particular, those methods also participate in Useless Abstraction For The Sake Of Abstraction Anti Pattern. Here is how they are implemented:

public AttributeItem GetAttributeItem(int attributeItemId)
{
    return Session.Get<AttributeItem>(attributeItemId);
}

public Attribute GetAttribute(int attrbuteId)
{
    return Session.Get<Attribute>(attrbuteId);
}

public IEnumerable<Attribute> GetAllAttributes()
{
    return Session.QueryOver<Attribute>()
        .Future<Attribute>();
}

public void SaveOrUpdate(Attribute attribute)
{
    Session.SaveOrUpdate(attribute);
}

And here is how they are called (from ProductService):

public AttributeItem GetAttributeItem(int attributeItemId)
{
    return productRepository.GetAttributeItem(attributeItemId);
}

public Attribute GetAttribute(int attrbuteId)
{
    return productRepository.GetAttribute(attrbuteId);
}

public void SaveAttribute(Attribute attribute)
{
    productRepository.SaveOrUpdate(attribute);
}

 public IList<Product> GetProducts()
 {
     return productRepository.GetAll();
 }

 public Product GetProduct(int id)
 {
     return productRepository.Get(id);
 }

 public void SaveOrUpdate(Product product)
 {
     productRepository.SaveOrUpdate(product);
 }

 public void Delete(Product product)
 {
     productRepository.Delete(product);
 }

 public IEnumerable<Attribute> GetAllAttributes()
 {
     return productRepository.GetAllAttributes();
 }

Um… why exactly?

But as I mentioned, this post is also about the proper usage of abstracting the OR/M. A repository was originally conceived as a to abstract away messy data access code into nicer to use code. The product repository have one method that actually do something meaningful, the Search method:

public IEnumerable<Product> Search(IProductSearchCriteria searchParameters, out int count)
{
    string query = string.Empty;
    if (searchParameters.CategoryId.HasValue && searchParameters.CategoryId.Value > 0)
    {
        var categoryIds = (from c in Session.Query<Category>()
                           from a in c.Descendants
                           where c.Id == searchParameters.CategoryId
                           select a.Id).ToList();

        query = "Categories.Id :" + searchParameters.CategoryId;
        foreach (int categoryId in categoryIds)
        {
            query += " OR Categories.Id :" + categoryId;
        }
    }

    if (!string.IsNullOrEmpty(searchParameters.Keywords))
    {
        if (query.Length > 0)
            query += " AND ";

        query += string.Format("Name :{0} OR Description :{0}", searchParameters.Keywords);
    }

    if (query.Length > 0)
    {
        query += string.Format(" AND IsLive :{0} AND IsDeleted :{1}", true, false);

        var countQuery = global::NHibernate.Search.Search.CreateFullTextSession(Session)
            .CreateFullTextQuery<Product>(query);

        var fullTextQuery = global::NHibernate.Search.Search.CreateFullTextSession(Session)
            .CreateFullTextQuery<Product>(query)
            .SetFetchSize(searchParameters.MaxResults)
            .SetFirstResult(searchParameters.PageIndex * searchParameters.MaxResults);

        count = countQuery.ResultSize;

        return fullTextQuery.List<Product>();
    }
    else
    {
        var results = Session.CreateCriteria<Product>()
            .Add(Restrictions.Eq("IsLive", true))
            .Add(Restrictions.Eq("IsDeleted", false))
            .SetFetchSize(searchParameters.MaxResults)
            .SetFirstResult(searchParameters.PageIndex * searchParameters.MaxResults)
            .Future<Product>();

        count = Session.CreateCriteria<Product>()
            .Add(Restrictions.Eq("IsLive", true))
            .Add(Restrictions.Eq("IsDeleted", false))
            .SetProjection(Projections.Count(Projections.Id()))
            .FutureValue<int>().Value;

        return results;
    }
}

I would quibble about whatever this is the best way to actually implement this method, but there is little doubt that something like this is messy. I would want to put this in a very distant corner of my code base, but it does provides a useful abstraction. I wouldn’t put it in a repository, though. I would probably put it in a Search Service instead, but that isn’t that important.

What is important is to understand where there is actually a big distinction between code that merely wrap code for the sake of increasing the abstraction level and code that provide some useful abstraction over an operation.

HTML5 Boilerplate MVC 3 Websites with AppHarbor in 3 Easy Steps

Here’s a quick way to get a new .Net MVC 3 site up that incorporates HTML5 Boilerplate patterns and practices.

Step 0: Get Git (If you don’t have it)

Git for Windows is available from the msysgit repository on Google Code; this guide was written for the 1.7.4 preview version.

There’s even a guide for installing on windows if you need some help.

Step 1:  Create Your AppHarbor Project

Go to the AppHarbor home page and create a new account if you haven’t done so yet.  Then click the Create New link on the Applications tab to get started.

Newapp

Once you’ve got your application created, copy the Repository URL so you can push your source up to your new site.

Gitlink

Step 2:  Create Your MotherEffin HTML5 MVC 3 Site Project

I’ve created a super easy HTML5 Boilerplate MVC 3 template project that can deploy to AppHarbor with no modifications.  You can get it from the Visual Studio Extension gallery, or through the new project dialog by clicking the Online Templates tab item on the left and searching for “HTML5?.

Html5projecttemplate

Make a note of your project location so we can use the Git Bash shell to push our source.

Step 3: Push it to AppHarbor with Git

Once you’ve got your project all set up and ready to deploy, navigate to your project’s location, right click on the root directory and select “Git Bash Here”.

Enter the following commands to initialize your new Git Repository
  1. git init
  2. git add .
  3. git commit -m "initial check in"

Once you have your files committed locally, you are ready to push up to the AppHarbor Git Repository Url.

Here are examples of the commands to do that:

  1. git remote add appharbor [YourSiteRepositoryUrl]
  2. git push appharbor master

Gitbashhere

Gitinitapp
Gitpushapp
Enjoy Your Site

Congratulations, you’ve just deployed your first HTML5 website.

Now all you have to do is navigate to your app’s url; i.e http://best-site-evar.apphb.com.

Next step, add a database and add the code first entity framework NuGet package for fast database scaffolding.  Hopefully I’ll get a tutorial up for that soon.

See the original post on my posterous blog

Hanselminutes Podcast 257 – Selenium for Web Automation Testing with Jim Evans

image Scott chats with Jim Evans from the Selenium team about how to get into Web Automation Testing. What’s new in Selenium v2? Can you use Selenium with any browser? How does .NET fit into the process? All this and more in this Web Testing Episode.

Download: MP3 Full Show

Links:

NOTE: If you want to download our complete archives as a feed – that’s all 257 shows, subscribe to the Complete MP3 Feed here.

Also, please do take a moment and review the show on iTunes.

Subscribe: Subscribe to Hanselminutes or Subscribe to my Podcast in iTunes or Zune

Do also remember the complete archives are always up and they have PDF Transcripts, a little known feature that show up a few weeks after each show.

Telerik is our sponsor for this show.

Building quality software is never easy. It requires skills and imagination. We cannot promise to improve your skills, but when it comes to User Interface and developer tools, we can provide the building blocks to take your application a step closer to your imagination. Explore the leading UI suites for ASP.NET AJAX, MVC, Silverlight, Windows Forms and WPF. Enjoy developer tools like .NET Reporting,ORM,Automated Testing Tools, Agile Project Management Tools, and Content Management Solution. And now you can increase your productivity with JustCode, Telerik’s new productivity tool for code analysis and refactoring. Visit www.telerik.com.

As I’ve said before this show comes to you with the audio expertise and stewardship of Carl Franklin. The name comes from Travis Illig, but the goal of the show is simple. Avoid wasting the listener’s time. (and make the commute less boring)

Enjoy. Who knows what’ll happen in the next show?


© 2011 Scott Hanselman. All rights reserved.

Page 1 of 612345...Last »