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

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