Web API 2.0

ASP.NET Web API 2 has been released with a number of new exciting features:
 

1. Attribute Routing

Along with convention-based routing, Web API 2 now supports attribute routing as well.

In case of convention-based routing, we can define multiple route templates. When a request comes, it will be matched against already defined route templates, and forwarded to specific controller action according to matched template.

You can see the following default route template in routing table for Web API:

This routing approach has benefits that all routing templates are defined at one common location but for certain URI patterns, it really becomes difficult to support (like nested routing on same controller).

With ASP.NET Web API 2, we can easily support above mentioned URI pattern and others as well. Following shows an example of a URI pattern with attribute routing. URI Pattern –> books/1/authors


2. CORS – Cross Origin Resource Sharing

Normally, browsers don’t allow making cross-domain calls due to same-origin policy and we know that. So, what exactly is CORS (Cross Origin Resource Sharing)?

CORS is a mechanism that allows a web page to make an AJAX call to a domain other than the domain which actually rendered that specific web page. CORS is compliant with W3C standards and now ASP.NET Web API has support for it in version 2.

 

3. OWIN (Open Web Interface for .NET) self hosting

ASP.NET Web API 2 comes with a new self hosting package i.e. Microsoft.AspNet.WebApi. OwinSelfHost.   According to http://owin.org/

OWIN defines a standard interface between .NET web servers and web applications. The goal of the OWIN interface is to decouple server and application, encourage the development of simple modules for .NET web development, and, by being an open standard, stimulate the open source ecosystem of .NET web development tools.

So, according to above description, OWIN is an ideal option for self hosting a web application in a process other than IIS process.

There are a number of OWIN implementations like Giacomo, Kayak, Firefly etc. available (some may be partial or outdated) but Katana is the recommended one for Microsoft servers and Web API frameworks.

 

4. IHttpActionResult

Along with the existing two approaches of creating response from controller action, ASP.NET Web API 2 now supports another way of doing the same. IHttpResponseMessage is basically an interface which acts as a factory for HttpResponseMessage. It’s very powerful because it extensify web api. Using this approach we can compose any specific type of response.

 

5. Web API OData

The Open Data Protocol (OData) is actually a web protocol for querying and updating data. ASP.NET Web API 2 has added support for $expand, $select, and $value options for OData. By using these options, we can control the representation that is returned from the server.

  • $expand: Normally, response doesn’t include related entities if we query an OData collection. By using $expand, we can get related entities inline in response.
  • $select: It’s used if we wanted to include subset of properties in response instead of all.
  • $value: It allows to return raw value of the property instead returning in OData format.

 

 

 

AngularJS Best Practices

Refactoring Existing Code to Angular

Start Small

Regardless of the type of code you’re refactoring, it’s usually best to start with a small component. It doesn’t always make sense to move everything into using some other library just because you can, but rather just change things as you need to develop new features or fix bugs. The simplest way to start is by taking a part of the code and replacing it with an Angular controller. Take away any code that modifies the DOM, and instead build it into the markup using Angular’s databinding features. You’ll definitely encounter cases where you need to access some more general code when doing this, which is a perfect case to move the code into a service. Then, it’s very easy to inject it into your controller.

Organizing Code

It’s usually a good idea to keep things simple. When you start, just create a page-specific angular module. This is probably quite obvious if you’re working with a single page app, but in a case where your app has traditional page changes, keeping modules on their own pages for starters is a good idea. As you keep adding things into the module, you’ll probably start seeing things that should be shared between controllers. In a case like that, you should move the code into a service.

Eventually you’ll start seeing cases where you need the same functionality in different modules. When this happens, create a base module and put the shared things there. You can then add a dependency to the base module into your page-specific modules.

Dealing with the DOM

You can easily move much of legacy DOM handling code into Angular simply by using Angular’s builtin directives and databinding features. However, in the likely case that you have used some jQuery plugins or done some other slightly more involved DOM trickery, things may be a tiny bit more difficult to sort out.

The most straightforward things can easily be wrapped into a directive. Sometimes the only thing you need to do is take the jQuery (or other) function call, wrap it in a directive and call it a day. For anything nontrivial, it’s usually worth checking out whether you can simply plug in Angular UI and be done with it. Even if that’s not the case, you can use their code as an example on how to do more complex plugin integrations or such into directives.

Working with Legacy Code
Especially with large applications, it’s often not feasible to move everything into Angular at once. You’re going to need to access your Angular services from some of the legacy code, and you’re also going to need to be able to respond to changes that happen via legacy event handlers inside your Angular code.

Why Entity Framework 7?

Upgrade to EF7 

If you’re currently on EF6, you might jump to the conclusion that you should upgrade to EF7 as soon as it hits the streets, but should we move to EF7? for some folks the answer will be, “Maybe never.” That’s right. There are certain features and development approaches that are being deprecated. The most notable is support for EDMX-based development, which is sometimes referred to as “model first” or “designer based.” Going forward, EF7 and beyond will only support code-based modeling, also known as “code first,” but which also includes reverse engineering code first entities from an existing database.

So if you have heavy investment in EDMX-based models, then you might want to completely rule out upgrading beyond EF6. After all, EF6 is mature, feature-rich, stable and performant. Because of that, it’s not going away anytime soon, and the team is continuing to fix defects and add minor features. It also might take a while for providers other than SQL Server, such as Oracle, to release versions that are compatible with EF7.

EF7 Applications

  • ASP.NET 5: This will be a “cloud-friendly” version of ASP.NET that allows you to target a stripped down and NuGet deployable version of the CLR, called .NET CLR Core. EF7 was re-written from the ground up mainly to support this scenario. Besides, EF6 won’t support CoreCLR and you’ll have to use EF7 if you want to take advantage of the version of .NET that targets the cloud.
  • Apps that use EF with code-based modeling (aka Code First), where you don’t use features not yet supported by EF7 . The bonus here is that EF7 is deployed as a set of Portable Class Libraries that can run on .NET 4.5.1, Windows 8.1 and Windows Phone 8.1 (and by extension on iOS and Android via Xamarin). There is also an In-Memory provider that is useful for testing scenarios.
  • You want to target non-relational data stores, such as Azure Table Storage or Redis, and you’re willing to wait for those providers to be written. In order to focus on rounding out the basic feature set and supporting ASP.NET 5, the EF team froze their work on non-relational providers. They will eventually come along, but you may need to wait a little while.
  • You want to target a local SQLite database on a mobile device and you’re willing to wait some more. Just like non-relational stores, development on the SQLite provider is being postponed until after the initial release and inclusion of basic features.

Beyond the support for ASP.NET 5, non-relational stores, and mobile platforms, most of what’s cool about EF7 is under the covers. It’s being written in the same modular fashion that makes ASP.NET 5 a compelling story. The idea behind it is to cut loose from the bonds of its legacy to provide a product where you can pick and choose just the components you need and can more easily insert custom extensions and configurations into the pipeline. This is what makes it cloud-friendly, because it reduces the application footprint in an environment where memory and processing resources are pay-as-you-go. And just like ASP.NET 5, EF7 has been designed so that dependency injection and testability are first-class citizens.

Starting from scratch has enabled the EF team to add features which were difficult to plug in while tethered to the old code base. These include batch updates (sending multiple statements to the database in a single round trip) and the ability to define unique constraints on entities besides the primary key. EF7 will also allow parts of queries to be executed locally and for providers to handle queries which produce multiple result sets.

Integrating Into Existing Code for AngularJS, ELM, and ReactJS

AngularJS

The following steps suggest a method to integrate AngularJS into your existing applications:

Write at least one small AngularJS application from the ground up that uses a model, custom HTML directives, services, and controllers. In other words, in this application, ensure that you have a practical comprehension of the AngularJS separation of responsibilities.

Identify the model portion of your code. Specifically, try to separate out the code that augments the model data in the model into controller functions and code that accesses the back-end model data into services.

Identify the code that manipulates DOM elements in the view. Try to separate out the DOM manipulation code into well-defined custom directive components and provide an HTML directive for them. Also identify any of the directives for which AngularJS already provides built-in support.

Identify other task-based functions and separate them out into services.

Isolate the directives and controllers into modules to organize your code.

Use dependency injection to link up your services and modules appropriately.

Update the HTML templates to use the new directives.

Obviously, in some instances it just doesn’t make sense to use much if any of your existing code. However, by running through the preceding steps, you will get well into the design phase of implementing a project using AngularJS and can then make an informed decision.

Elm

Elm has three different ways to embed components and applications: fullscreen, embedded and worker. Fullscreen replaces the page with the Elm app, great for writing web-based games. Embedded mode functions in the same way as React: it renders into a particular DOM node. Worker lets you use the Elm component inside of a web worker, as a background process that works with the rest of your app.

To communicate with JavaScript code, you can pass things into Elm with flags for one-way communication (similar to passing properties into a React component), or you can use subscriptions to listen for events from the Elm component, such as mouse clicks or text input changes (similar to event callbacks in React). When we limit the comparison between Elm and React to React’s mode of integration, Elm is a bit more complicated in terms of having to set up flags and subscriptions but once you get used to it, it’s about as easy as React.

What could give Elm an edge over React is the compilation and bundling. You can compile multiple Elm components into one bundle and then include a script tag and an initialization script: you now have access to all of your Elm components in a nice convenient package. Because it is built into Elm, you don’t have to rely on Grunt, Gulp, Webpack, SystemJS or whatever flavor of module bundler and build system is popular today. 

ReactJS

React has only one way of being integrated into a code base: it can only replace DOM nodes. This is great because it keeps things simple, and when you’re working on integrating React into an existing code base, all you need to worry about is passing data from the rest of the web app into the React components.

All the other nice things about React, like using Redux, Nuclear.js, Immutable.js and ReactRouter, can be integrated later on. React is only one part of the framework and it can function as a replacement for the view rendering of any other framework. You don’t even have to use the JSX syntax! You can start using React in an existing web app by including the React and ReactDOM scripts and with a few lines of JavaScript you can define and insert a React component into the page.

 

 

Entity Framework 7 (EF7)

EF7 is more powerful and has significant changes over Entity Framework 6.x. Entity Framework 7 will give you familiar developer experience to previous versions of EF, the user can still work with DbContext, DbSet, etc.

EF7 is much more lightweight than previous versions and is built from the ground up to work great in the cloud (using ASP.NET vNext) on devices (i.e. in universal Windows apps) as well as in traditional .NET scenarios.

Important features of Entity Framework 7:

Lightweight and extensible

Instead of use existing Entity Framework 6 APIs, Team decide to start developing from the scratch. You can use only that extensions which are useful to your project. The pattern and concept remain same to use Entity Framework. You can use DbContext/DbSet same way as you are currently using. The advantage of extensible is you can replace and extend it.

New Platforms

EF is most popular ORM that currently includes applications built with technologies such as WPF, WinForms and ASP.NET. After looking at future Microsoft has decided to support remaining platforms where .NET development is common. This includes Windows Store, Windows Phone and the Cloud Optimized .NET.

New Data Stores

Entity Framework was clearly tied with relational data stores. Now onward EF provide great support to non relational data stores also. Relational & non Relational, like Azure table storage.

Optimized Query generation

Based on people’s higher request on EF uservoice “Improved SQL Generation“, Diego Vega (Engineering Manager, Entity Framework) responded positively and start working on this feature. On next or may be final release they will include this feature. EF7 will generate much simpler SQL queries than EF6 for the most common scenarios.

Code first only

Finally Microsoft Team retired EDMX in Entity Framework 7. You can read Rowan Miller’s article EF7 – What Does “Code First Only” really mean. If you still love edmx, you would love to read What about EDMX when EF7 arrives? written by Julie Lerman.

Batch Update

No longer need to use EF batch update utilities to perform batch operations because EF7 has inbuilt support for that. EF 7 no longer send individual command for every insert/update/delete statement. EF 7 will batch multiple statements in single round trip to the database.

Unique Constraints

EF 7 allows you to identify additional unique keys within your entities in addition to the primary key. You can then use these alternate keys as the target of foreign key relationships. A unique constraint is introduced for each alternate key in the model.

ELM vs AngularJS vs ReactJS

Which is Easier To Get Started With?

Elm and React and Angular all give you the opportunity to try them out in the browser, so you can learn their syntax and how they work immediately. React’s version of “try it out” is simpler, while Elm’s version is a full-page code editor which has multiple examples demonstrating the syntax, how to work with buttons, how to do drag & drop, and some basic HTML5 Canvas examples. While React’s version does show the compiled JavaScript code, Elm gets a point in its favor because the examples are better and the editor allows free-form code to be written. There is also a new online editor for Elm called Ellie that makes it even easier to try out right in the web browser.

Both Elm and React are installed using NPM, the Node Package Manager. Elm is globally installed and provides its own package manager. The default install of Elm includes the core libraries, HTML libraries and the Virtual DOM rendering engine. The default install of React includes React and the React-DOM library.

The React tutorial suggests installing create-react-app, which is a way to get React up and running quickly. It does not include Webpack or any other build tool, but it does let you use JSX syntax, ES6 JavaScript, and the Flow type-checker. Type-checking is built right into the Elm compiler.

Elm and React are easy to install and both have made efforts to keep things as simple as possible. React gets a point here with its officially endorsed create-react-app boilerplate project (though there are boilerplate starter projects out there for Elm, too).

The Development Feedback Loop
While developing the app, the React’s starter kit nice to work with because it made the feedback loop fast. The JavaScript code was recompiled whenever a change was made and the browser reloaded the web page. Elm’s equivalent is elm-reactor which also watches Elm files, recompiles and reloads the web browser.

What give Elm an edge over React are the compiler error messages. While Elm has better type-checking, and React does not have any built-in type-checking (aside from rudimentary component properties type-checking), comparing the error messages is another part of the feedback loop.

For performance, this is a benchmark that tries to compare the performance of Elm, React, Ember, and Angular in a fair way:

https://github.com/evancz/react-angular-ember-elm-performance-comparison

Azure API Service Architecture

The Azure App Service platform brings the best of what the Azure Cloud has to offer into one cohesive and flexible architecture. Azure App Service makes it easy to build enterprise systems leveraging both your own and third-party APIs.

Azure App Service brings together Web Applications, Mobile Applications, and powerful new Logic Apps, all of which communicate with Azure API Apps. There are many options to build these systems, to consume RESTful Web APIs and to automate client code generation which can significantly reduce the amount of manually written code. 

The new App Service supports the following application categories:

  • Web Apps – Azure Websites service is rechristened as Web Apps. This service provides a polyglot environment to host websites developed in .NET, Java, PHP, Node.js and Python. Web Apps gallery offers developers a one-click capability to install packages like WordPress, Joomla and Drupal. Web Apps can be configured for auto-scaling to dynamically scale-up or scale-out. Developers can configure continuous integration and deployment workflows with VSO, GitHub, TeamCity, Hudson or BitBucket. The service makes it easy to perform A/B testing to verify new code by selectively routing a fraction of live traffic.
  • Mobile Apps – Azure Mobile Services feature has become Mobile Apps within App Service. Mobile developers can take advantage of App Service to build native iOS, Android, and Windows apps or cross-platform Xamarin or Cordova (Phonegap) apps. The service supports hybrid capability to connect mobile applications with enterprise on-premises data. With the new SaaS API connectors, mobile developers can easily integrate their apps with popular 3rd party services such as Twitter, Salesforce and Twilio. Offline Sync and Push notifications are other key features of this service.
  • Logic Apps – Logic Apps allow developers to design workflows based on a series of steps that are triggered by an event. Developers can stitch multiple APIs and services as a part of the workflow without writing complex code. Existing templates provide a good starting point for developers to quickly design workflows. The connector marketplace acts as an exchange to publish and consume custom API Apps that can be used in Logic Apps. BizTalk Services are tightly integrated with Logic Apps to provide advanced integration scenarios.
  • API Apps – API Apps make it easy to develop, publish, manage, and monetize APIs. Developers can publish APIs written in ASP.NET, Java, PHP, Node.js or Python. Through simple access control, authentication can be built into APIs. Developers can share APIs with other teams within an organization, by using their own private organizational gallery of APIs or they can also be shared publicly for consumption by third party developers. Azure App Service can automatically build SDKs for a variety of languages including C#, Java, and Javascript, making APIs available to many platforms.

This consolidation turns Azure PaaS into a rich application platform. According to Microsoft, App Service delivers a fully managed and secure infrastructure for developers to build cloud-first and mobile-first applications.

AngularJS vs Vue.js vs Reacttjs

Let us first declare that Angular is a mammoth and Vue.js is the tiger hungry enough to become big soon. 

Vue.js is less opinionated solution than Angular. That allows you to structure your app the way you want it to be, instead of being forced to do everything the Angular way. It’s only an interface layer so you can use it as a light feature in pages instead of a full blown SPA. There are many tools in Angularjs and so many complex syntax that it can confuse you sometimes. 

React and Vue.js has some similar features . They both:

1) Utilize a virtual DOM
2) Provide reactive & composable view components.
3) Keep focus in the core library, with concerns like routing and global state management handled by companion libraries.

OData Pros and Cons

OData is the Open Data Protocol. It is an open web protocol started by Microsoft to expose data using existing web technologies. This is based on Representational State Transfer (REST) full architecture. HTTP, AtomPub (similar to RSS, but specifically introduced special XML format for OData), JSON are all supported.
Here, the URL is the primary operator on the data query.

WCF OData Service

In Visual Studio 2013, there is a template to create a WCF OData service. So, we can easily create an OData Service using Visual Studio 2010.

Example of OData Service has been used

  1. Last (2010) football world cup (S.A), the scoring website was done using an OData Service.

Why should we use an OData Service? 

  1. OData is based on the REST architecture, so we can retrieve data based on an URL.
  2. It also supports HTTP, Atom Pub as well as JSON format.
  3. It has support for any type of data source. Even you can use a custom class as a data source.
  4. No need to create a proxy service object. So, it is lightweight to use.
  5. You can create your own custom methods and expose it.
  6. Since it is lightweight, the interaction between server and client is fast. Thus, performance is good.
  7. It offers full CRUD support by using the different HTTP methods:
    • GET: Gets one or many entries.
    • POST: Create a new entry.
    • PUT: Update an existing entry.
    • DELETE: Remove an entry.
  1. A WCF Data service can expose an entity model via an URI.
  2. A WCF Data service could be consumed by any type of client like Windows, SilverLight, Web, AJAX and console.

Limitations

  1. Since it is purely URL based, it is less secure.
  2. Not every query operator in LINQ is available in OData like Filter, Skip, Take etc.

Working of a WCF Data Service

There are five components.

  1. DataBase.
  2. Data Access layer using ADO.Net Entity model or LINQ.
  3. Entity Model Implementing Iqueryable and Iupdatable Interface.
  4. WCF Data Service exposing CRUD Operations on entity model as REST Service.
  5. Consuming it on various types of clients.

Supported Message Format

  1. JSON
  2. XML (ATOM)

React or AngularJS?

WHEN SHOULD YOU USE REACT?

React shines when you have lots of dynamic content changing within the view. Most client-side solutions on the web today struggle with rendering large lists of items within a single view. This “struggle” may be on the order of milliseconds, but in this increasingly digital world, a half a second delay is all it takes to kill your user experience. It’s why sites that have a lot of dynamic, constantly changing, data-intensive content like Instagram or Facebook choose to power their applications with React.

As a library, you can also use React as the view component of AngularJS or other frameworks, because it does not tie you to a specific technology stack. That said, there’s a quickly growing community and a number of existing libraries and add-ons that can help you build an app from scratch. 

WHEN SHOULD YOU USE ANGULARJS?

Development time is at a premium, and you need a full, comprehensive framework that will get you running quickly out of the box. As we mentioned earlier, comparing a library to a framework isn’t really a valid question, as you can always use one with the other.

The real question to ask is when shouldn’t you use React? React is not backwards compatible with browsers older than IE8. Also, the community is young, so it’s possible you’ll have to do a lot of “reinventing of the wheel” in order to get the specific features you’re looking for. It’s also up for debate whether or not installing React is worth the trouble if your project is either a simple webpage or if AngularJS is already more than capable of rendering your view.

With the recent releases of Angular, Angular devotees have another reason to stick with their framework of choice. Angular shipped with a huge performance boost, including support for server-side rendering and a similar approach to using one-way data binding to only manipulate the parts of the DOM that need to be changed. However, Angular also involved a major rewrite of the framework, so whether you choose to install React or upgrade to the next generation of Angular, there’s still going to be a learning curve to overcome.

Copyright © All Rights Reserved - C# Learners