Breeze v1.4.12 issues with POST requests and breeze.ajaxpost.js

Standard

Originally posted on My Memory Dump:

After upgrading Breeze to v1.14.2 all my Breeze queries start to fail.

After some analysis I noticed that the fault was on line 14952 of the Breeze library (using the breeze.debug.js file):

  if (!core.isEmpty(this.defaultSettings)) {

The fault reason was due to “this” being undefined.

The project I was working on was using AngularJS and it was also using the breeze.angular.js to make sure that Breeze was using the $http service from Angular and also the $q service instead of Q.

It also happened that I had some queries that required large objects to be sent to the server, so I was also using the breeze.ajaxpost.js from Breeze Labs to support this need. In this file there’s a call to the ajax function of the Ajax Adapter defined on the Breeze library, here’s the code excerpt:

    // Add processSettings to ajaxAdapter
    functiondivertAjaxImpl(ajaxAdapter){
        if(

View original 186 more words

“Durangular”

Standard

Rob Eisenberg, Durandal’s creator, announced here that he has joined forces with the Angular team to bring the best of both worlds together.

As a Durandal user this “convergence” smelled right away like “bye bye Durandal” to me. But as I kept reading Rob´s post I realized that it wasn´t like that, at least for now.

I´ve been a Durandal fan and user since the day it came out and all my SPA projects have it as their base framework.

It´s not that I´ve been indifferent to Angular, but Durandal feels right for me, it has all the features needed to build a SPA and quite frankly it does an awesome job accomplishing that.

But let´s be honest we all had this gut feeling right? Angular has gained a huge popularity in the Developer community and has Google financial support behind it. So this is almost like David and Goliath story with a “if you can´t beat them join them” ending.

DavidAndGoliath

If like me, Dear Reader, you feel that Rob´s post is that “push in the back” that was needed to meet n´greet Angular, let me show you what were my basic 5 concerns towards this framework and its adoption. This will help to better understand that Angular just like Durandal is an exceptional SPA framework and that they aren´t so different after all.

Concern 1: What about my legacy code and current projects that use Durandal?
Answer: Durandal is not dead, neither your projects that use or will use it.

Durandal 2.x is not going away. It will continue to be maintained by myself and a core team of committers.

(extracted from the aforementioned post)

 

Concern 2: VM or Controllers?
Answer: Who cares? Just think modularly.

/*This is the Durandal module where we define our VM*/
define(['services/logger', 'services/dataservice', function(logger, dataservice){
   var vm = {
     firstName: ko.observable('Ricardo'),
     lastName: ko.observable('Barbosa')
   });
/*This is the Angular module where we define our Controller*/
var app = angular.module('app', []);
app.controller('demo', function($scope) {
   $scope.firstName = 'Ricardo';
   $scope.lastName= 'Barbosa';
});
 

Concern 3: Databinding and all the syntactic sugar around it.
Answer: Push the observables out of the way, change the “data-bind” syntax in your views for “ng-*” directives, or {{ }} and you still get a 2 way data-binding system.

/*This is a ko observable used in Durandal and its correspondent view binding syntax*/
var vm = {
     buttonText: ko.observable('click here'),
     buttonClick: function() {
          alert('button clicked');
   }
   });

<button type="button" data-bind="text: buttonText, click: buttonClick"></button>
/*This is a "POJO" used in Angular and its correspondent view binding syntax*/
app.controller('demo', function($scope) {
   $scope.buttonText = 'click here';
   $scope.buttonClick = function() {
          alert('button clicked');
   };
});
<button type="button" ng-click="buttonClick">{{buttonText}}</button>

Concern 4: Where´s my router?
Answer: Relax, it´s there and it has the same obvious name, router.

/*This is how we define our routes in Durandal using the plugins/router module*/
router.map([
                { route: '', 
                  hash:'#search', 
                  title: 'Search view',
                  moduleId: 'viewmodels/search', 
                  nav: true 
                },
                { route: 'profiles*profile/:userId', 
                  title: ' Profile', 
                  moduleId: 'viewmodels/profiles/profile', 
                  nav: true 
                }
            ]).buildNavigationModel();
/*This is how we define our routes in Angular using the ngRoute module*/
app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/search', {
        templateUrl: 'app/views/search.html',
        controller: 'SearchController'
      }).
      when('/profiles/:userId', {
        templateUrl: 'app/views/profiles.html',
        controller: 'ProfilesController'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

Concern 5: How about lifecycle callbacks like the activate, attached, compositionComplete, etc that exist in Durandal?
Answer: Angular also has its own like controller creation events, $viewContentLoaded, $destroy, etc.

/*Some example Durandal callbacks*/
var
        vm = {
            activate: activate,
            attached: attached,
            compositionComplete: compositionComplete

        },
    return vm;

     function activate() {
       /*Called when the view is first activated, its intent is to wire up view activation logic*/
    }


    function compositionComplete(child, parent, settings) {
        /*Called when the composition for the object is complete*/
    }


    function attached(view) {
        /*Called when the view is attached to its parent DOM node*/
    }
/*Some example Angular callbacks*/
app.controller('main', function($scope) {

app.controller('Controller1', function($scope) {
  /*Controller1 has been constructed*/
  
  $scope.$on('$viewContentLoaded', function() {
    /*The view for this controller has loaded*/
  });
  $scope.$on('$destroy', function() {
     /*Controller1 is no longer needed and has been destroyed*/
  })
});

As soon as I realized this ressemblance, the “convergence” news got a complete different meaning in my head, prepare Ricardo, awesomeness is on the way!

See ya next time!!

Keeping BreezeJS magic intact with SummerBreeze

Standard

If you´re using BreezeJS to create and manage your app BDO´s on the client-side, with Entity Framework as your ORM and you have 1:1 mappings between your server and client objects, then breeze works just like magic.magician

But if you´re using DTO´s instead of the complete server-side models, or if your app relies on a different ORM framework rather than EF, or simply because you don´t have any back-end database at all, then you know you have to do a bit of “plumbing” for BreezeJS to do its job.

That happens because currently out-of the box there is no ContextProvider implemented rather than the EFContextProvider (crafted for Entity Framework). BreezeJS uses metadata to describe server-side entity types and their relationships in order to automatically map and build your business objects as “first class” breeze entities on the client-side.

If no metadata is supplied the far as you can play with the awesome BreezeJS features, is the ability to have your client side queries “translated” into valid linq queries against the IQueryable provided on the server.

This is like driving a Ferrari on a 20 mph speed limit zone.

The widely used approach is to create all the metadata by hand and include it in a model.js script file as you can see on the nodb sample.

There´s no problem at all with that but when you have quite a few business entities to create this process can turn into a real pain.

In order to overcome this situation and maintain the BreezeJS magic intact I´ve created SummerBreeze, a metadata generator library and entity creation client script to use with BreezeJS for no DB, no EF ORM or EF ORM with DTO scenarios (non 1:1 entity mappings).

With SummerBreeze the automatic entity type creation process on the client-side is kept alive.

Here are some nice features of SummerBreeze:

  • Simple inclusion – just add reference to the SummerBreeze assembly on the server and the summerbreeze.js script on the client.
  • Eazy bootstrapping – decorate your POCOS with attributes, pass the type of your datacontext or repository class that implements the ISummerBreezeDbContext interface to SummerBreezeContextProvider class, and use the summerbreeze.js script to create a generator instance to generate your entity types. Simple!
  • Property cherry picking – If you don´t want to serialize metadata from all your model´s properties, just select the ones you want by their name.
  • Wide coverage – Data Properties, Navigation Properties, Validation Properties and Unmaped Properties supported.
  • Compatibility – Can work with both EF scenarios and non-EF scenarios. It supports having both EFContextProvider and other metadata providers.
  • Entity saving – Both ways supported, not only entity creation.

I think this is a nice-to-have feature that the guys at IdeaBlade could implement on the next versions of BreezeJS. It´s a more consistent approach to what BreezeJS already does with EF, does not give you the impression that it is “tied” to a specific technology (which is not) but above all it maintains the productivity boosts that this library used us to.

SummerBreeze is available as a nuget package and you can get more information about this library at the github project site.

Go check it out.

What do you get when combining EF5, Web API, Bootstrap, jQuery, Breeze, Knockout, Sammy, Require and SignalR into a single MVC 4 app ? Behold SuperSPA Template.

Standard

Hello Dear Reader,

This is my first post of 2013 so I want it to have a special creativity flavor. :)

SPA´s or Single Page Apps are really the buzz words of the moment, so after being inspired by John Papa´s Pluralsight video, I decided to create my own SPA template for VS 2012.

You are probably wondering…wait isn´t there a SPA Template delivered with the ASP.NET Fall 2012 Update? Yes and it´s awesome! But it doesn´t have all the technologies mentioned in the video as well as others like SignalR, Breeze, Bootstrap, etc that I bring in.

Say hello to SuperSPA Template! A responsive SPA app that works on all modern HTML 5 browsers and devices.

SuperSpa Template

SuperSpa Template

The user story behind the template (the Photo BlurZ! app) is very simple. It´s a blurred images sharing site where users can not only search and download those images (so called blurz) as well as contribute to the gallery by uploading their own.

What it´s interesting about this SPA is that all data changes are processed in real-time, that is to say if you open 2 browser windows and user in window 1 uploads an image or changes the image ratings, user in window 2 will immediately see those changes. How cool is that? ;)

Also because it makes heavy use of local caching, the app is quite fast and server round-trips only happen when absolutely necessary or when the internal entity change detection mechanism tells it to do so.

Enjoy!

First Hello World on a Win8 App? Don´t bump into execUnsafeLocalFunction.

Standard

15 days since I installed Win8 Pro RTM on my Asus G74SX and let me tell you, I absolutely LOVE it! Super fast boot times, fluid and responsive design, Hyper-V is just that delicious cherry on top of the cake and if like me you´re a keyboard shortcuts and run command freak, you´ll love the new desktop mode without a start button.

As the installation went out so well, I thought it was now time to “shout” my first Hello World with a Windows 8 App, so I fired up Visual Studio 2012 Ultimate, and after File > New Project > Templates > Other Languages, I selected the JavaScript Blank App template.

With the help of MSDN Roadmap a Hello World was almost as quick as blinking an eye. The only thing that made me a little reluctant was when I decided to pull the the jQuery lib from Nuget, included it in my project and after hitting F5 started having errors like “Unhandled exception at line 2031 JavaScript runtime error: Unable to add dynamic content”.

This means that I’d just “bump” against the new Windows 8 security model that prevents “unsafe” dynamic DOM injections when using either innerHTML and outerHTML properties or the document.write method. jQuery comes with lots of checks for browser compatibility when bootstrapping that make use of these, so the error occurrence had a point there.

How does one solve this?

Fortunately, Microsoft provided the method execUnsafeLocalFunction so that we can wrap our “unsafe” code in order to step over this security validation.

Like this example below:

<div id="dynamicDiv"></div>
MSApp.execUnsafeLocalFunction(function () {
    document.querySelector("#dynamicDiv").innerHTML = "<a>This is a DOM injected link</a>";
});

After some googling around I found this “Win8 ready” jQuery lib, which already has the execUnsafeLocalFunction in place and I´m sharing it here so that unlike me, dear reader, you don´t hurt your head when this bump happens. ;)

The final work was kind of a fancy CSS 3 animated menu. See ya next time!

Hello World Fancy Menu

Hello World Fancy Menu

An overview of my MSc thesis and maestroo – an immersive sensing tool

Standard

Well it´s no secret to anyone, especially those following my activity that I am finishing my Master´s degree in Computer Engineering and currently coding and writting my thesis, which is being developed at the research unit SITI in Universidade Lusófona under the coordination and guidance of PhD Paulo Mendes and Professor Bruno Batista.

All my work integrates another project called CitySense and was inspired by the concept of Cooperative Sensing Systems, which are nothing more than large-scale distributed systems, hosted on mobile devices, that work in a collaborative way, sensing the environment and our interactions with it, whether they are between people or between people and their surroundings.

The term cooperative arises from the fact that these mobile sensing systems can share sensing data between them (i.e. combining gps with accelerometer and gyroscope for accurate location and position) and by doing so they are not only allowing a more precise inference over the collected data but also diminishing the burden of power constraintability (aka battery-life) over a single sensing device.

If you google on the issue you´ll find a ton of papers on this matter, so probably you´re asking what was my motivation behind this? It´s simple, allowing this systems to share, besides sensor data, the sensors themselves, in such a way that if I want to incorporate a sensor from another device onto mine, i can literally do it in an easy and straightforward way.

Now besides this, as maestroo (the name of the software) abstracts what a sensor really is, we can build an entire app having sensors of all kinds to share, “real” ones, like accelerometers, gps, light, temperature, etc and what we call “virtual”, that can be really anything ranging from an output of a software that measures a company kpi´s, to a feed reader, to camera images, to an audio stream, you name it, as long as it can come down the wire, the software will know how to handle it.

Maestroo is entirely built on C# and runs on every platform that can support it. Currently is working on Windows Phone, Android with mono for android, windows and linux workstations with the help of mono project and in the future will be developed for iOS using monotouch and micro-framework based boards, like the netduino.

One of the main challenges of building a distributed system like this is trying to avoid code changes, when you move from a platform to another or else it will look like your coding a different application everytime.

So besides the precious help of mono there were other technologies that made this happen, TinyIoC as the name suggests, a small dependency resolver / injection container, protobuf.net, google´s engine for object serialization implemented for .net and working on almost every platform and vici coolstorage for handling sqlite database operations also multi-platform support.

For the video above I´ve built a simple MVC 4 SPA to make use of the sensed data in a more visual way and used some javascript libraries that helped a lot like KnockoutJS for MVVM and declarative bindings support, KinectJS for HTML 5 Canvas API drawings and animations and last but definitely not least, JQuery, which needs no introductions.

You can also find more information about the technologies used in here.

This is still a work in progress, so enjoy…

LiteIoC

Standard

As probably everyone else out there I don´t like to be part of the wheel reinventers club, but sometimes, when you can´t beat them…join them.

In the process of coding for my Masters thesis, which involves having fun with mobile devices and embedded programming on microcontrollers like my NetDuino board, I really needed a super micro, tiny, lightweight…you name it…IoC container specifically crafted for the .Net Micro Framework.

I thought, “this will be an easy task as there are many IoC libraries out there”…Yes…but not for Micro Framework.

The only one I found that seemed to fit my needs had a strong dependency on another 3rd party library for AOP , but when you have only 64k to spend for code storage, optimization clearly becomes the word of the day.

So I took some time to code a very small and simple IoC container that had just the features I needed:
– Lightweight
– Simple Setup
– Singleton “lazy” container
– Constructor and parameters injection
– Named based registration

Say hello to LiteIoC.