What I learned from Angular Attack competition in 48 Hours


Angular Attack coding is over. I spent a wonderful time in learning new things and building my first Angular 2 application with Amal Ayyash as team (Sorief & Sela team).
I was lucky to work her since she is one of the best UI/UX in Jordan.

Simply I learned a lot. In 48 Hours I learned the following:

  1. Angular 2 for sure, angular.io was my reference. But that does not mean that I did not check angular 2 before that day. I watched John Pap videos in pluralight, and only 1 or 2 videos from egghead.io
  2. Typescript (For me it’s the evolution of JavaScript) in visual studio.
    I will use Typescript in all of my upcoming projects. It helps us to developer a maintainable neat code that is easier to read and it’s supported in Chrome Developer tool to debug and trace.
  3. Firebase, it’s easy and simple.
    “Firebase gives you the tools to develop high-quality apps, grow your user base, and earn more money. We cover the essentials so you can monetize your business and focus on your users.” (https://firebase.google.com/docs/)Firebase will open a web socket between the repository and your web app.
    So every change on your Database will be reflected to the UI immediately.Change data in Firebase => Web Socket will send to the app => Finally, Angular will reflect the change to the UI.Easy to integrate with with other OAuth providers (e.g. Facebook, Google, Twitter, etc..). Also it’s very simple to set the security rules (Read, Write, and validation).
  4. Surge.sh is a static web publishing for Front-End Developers. It’s very simple. But if you decided to use firebase then it’s better to host your app there. both of them Firebase and Surge have a simple CLI tool to deploy your app.

Now we are waiting the judges decision. Regardless of the results, getting this knowledge in this short period was a prize and we’ve got a lot of fun while working on something new. You can vote for us, please do 🙂 … and thank you for your support us advance.

Vote from this link => https://www.angularattack.com/entries/579-sorief

Advertisements

MVC Tooltip Validation using jQuery and Bootstrap


Check the Sample Code Github

Me and Ahmad Aqrabawi created a simple jQuery plugin to convert MVC Validation to a Boostrap tooltip validation error.

When you create a form; Validation Errors could change in the layout when its appear and may messed up the your layout .. So its error tooltips could be useful sometimes.
Simply, create new MVC project and navigate to “Register View” .. Add a validation message from Html helper directly after the text box

@Html.TextBoxFor(m => m.UserName, new { @class = “form-control” })

@Html.ValidationMessageFor(m => m.UserName)

Same thing for the other fields.

@section Scripts {

@Scripts.Render(“~/bundles/jqueryval”)

<script>

$(function () {

$(“form input”).tooltipValidation();

});

</script>

}

Also you can add placement option (by default its top)

$(“form input”).tooltipValidation({

placement: “right”

});

One more thing … your tooltips will appear in black colour now. If you to make it in red add this file

<link href=”~/Content/jquery.validate.mvc.css” rel=”stylesheet” />

 

Check the Sample Code Github

JayData Makes Web Phenomenal !


 

Creating Single Page Application, Web API, Upshot, An Exposed Service bring your data from Json Endpoints (maybe WEB API) … all of this is the new nueva moda.

This is nice till now. But the catastrophy started when you want to map your JSON with your EF Objects. Serializing stuff! Not Serializble! What the Hell! so change return type to ‘dynamic’ and bring ‘anonymous object’ … upshot is not documented!! And the Single Page Architecture Template (which is provided by Microsoft) .. Not mature enough! So simply they removed it from VS 12.

And Finally God guide me to JayData! Its amazing and phenomenal.

That’s what happened to me when I saw the first video for JayData

Imagine, Silverlight RIA can be used in Web. This “Framework” .. not just library

Solve this things in Previous Microsoft Single Page Architecture:

  • Generating the whole EF Model + Metadata automatically using JaySvcUtil.exe (You can see this in video)
  • Do not bother your self by creating many Web API controllers and doing all that mapping stuff between C# and JavaScript.
  • Getting optimized Data (Just needed data):

7-31-2012 6-02-35 AM

In this image you can see how I’m getting the Whole users from the WCF Data Service.

map ==> Used to get a specific properties from the object (That’s will minimize the size of the requested data; which means some KBs instead getting the whooole object).

Also I’m using Knockout to bind UI Elements with self.users observable array

7-31-2012 6-08-34 AM

  • You can use LINQ in JavaScript. Haha, Brilliant! For example if you have a users table and People table. And Each User is a Person. Lets see how to get Person Data if you clicked on a User.

7-31-2012 5-52-38 AM

First Param is a predicate that brings a person by Id.

this.Id ==> Passed in Second param as you see.

And Third one; is the callbacks from the operation. Awesome!

showPerson binded with list of users using Knockout JS (2nd image shows how I binded Div Element with showPerson function).

What else, See this video

http://nuget.org/packages/JayData

http://jaydata.org/

http://jaydata.org/api

MVVM with ASP.net Using knockout JS Library


Download Sample Code

If you are a WPF or Silverlight developer; you should be familiar with the fancy binding and notification Mechanisms in it.

MVVM pattern is dependent on these mechanisms to view data binding expressions.

Fortunately, Steven Sanderson created a brilliant library to use MVVM pattern with ASP.net and he called it Knockoutjs

What is Knockout library?

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

Knockout documentation

To learn this library you can start with this interactive tutorial http://learn.knockoutjs.com/

Now, Let’s do our first ASP.net application using this wonderful library

  • Create a new Empty Web Application. (Name it KOTest)
  • Create a new person class as follows
Public Class Person Private _FirstName As String Public Property FirstName() As String Get Return _FirstName
        End Get Set(ByVal value As String)
            _FirstName = value
        End Set End Property Private _LastName As String Public Property LastName() As String Get Return _LastName
        End Get Set(ByVal value As String)
            _LastName = value
        End Set End Property Private _Age As String Public Property Age() As String Get Return _Age
        End Get Set(ByVal value As String)
            _Age = value
        End Set End Property End Class 
  • Add a web Service (ASMX Service) and call it ViewModelService.asmx
  • After adding this service uncomment the first line
<System.Web.Script.Services.ScriptService()> _
  • And Paste this method to it.
    <WebMethod()> _
    Public Function GetPerson() As Person   Return New Person() With {
            .FirstName = "Mohammad",
            .LastName = "Najeeb",
            .Age = "27" }
    End Function
    • Add a new Web form page (call it ko.aspx).
    • Import two javascript libraries
      • jQuery 1.4.1 (You can download it from here)
      • knockout 1.2.1 (You can download it from here)
      • You can also add jQuery templates but I did not use it in my sample here (You can download it from here)
    <script src="JS/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="JS/knockout-1.2.1.js" type="text/javascript"></script>
  • Now, Let’s create a person class in javascript
// Create a Person Class with Constructor  // that takes two parameters (First Name & Last Name) var person = function (fName, lName) {
    this.FirstName = ko.observable(fName),
    this.LastName = ko.observable(lName),
    this.Age = 0
};

As you see above. FirstName property and LastName property are Observables.

Observables (like FirstName and LastName) will notify the UI when they changed in viewModel object.

So the previous implementation for person class in javascript is similar to TwoWay binding in WPF.

If FirstName and LastName are not observables; The UI will display the values at the first time. but any change occurred in property will not be reflected to the UI.

Removing Observables from FirstName & LastName similar to OneTime binding mode in WPF.

Screen Shot 2011-07-30 at 8.59.59 PM
So if you want to do a OneTime binding change your person implementation in  JavaScript to be like this

var person = function (fName, lName) {
    this.FirstName = fName,
    this.LastName = lName,
    this.Age = 0
};

But viewModel is not binded to the UI till now!! And this is our next step.

  • Bind viewModel object to the UI & get the values from Server by calling the web service.
jQuery(function () {
    ko.applyBindings(viewModel);
    KOTest.ViewModelService.GetPerson(onSuccess,
                                      onFail,
                                      null, null);
});
  • As you know you need a Script manager to call the service. So please just add it at the top of the page inside the form tag.
  • When calling service succeeded; just set viewModel.person property
function onSuccess(result) {
            viewModel.person(new person(
                             result.FirstName,
                             result.LastName
                             ));
        }
  • Paste add this HTML in you page
<div<div> <label for="<%=txtFirstName.ClientID %>"> First Name</label> <asp:TextBox ID="txtFirstName" runat="server"  data-bind="value:person().FirstName"> </asp:TextBox> </div> <div> <label for="<%=txtLastName.ClientID %>"> Last Name</label> <asp:TextBox ID="txtLastName" runat="server"  data-bind="value:person().LastName"> </asp:TextBox> </div> <div> <asp:Button ID="btnSubmit" runat="server"  Text="Submit" /> </div> </div> 

This is all what I have for Now. And Another Happy Weekend had been finished Sad smile. Happy Ramadan for all. And See ya later.