Wednesday, February 22, 2017

Check out my jTLine jQuery plugin, that create Horizontal Timeline


jQuery plugin, that create Horizontal Timeline,
Build upon the fantastic "codyhouse" article : 

Tuesday, February 14, 2017

Our feedback after using : Angular 2, Typescript, .Net Core Web Api V 1.0.1, Entity framework Core 1.1.0 (Code First)

This blog post will enplane our feedback and lesson learned after completing our latest project (First Stage) using:
Angular 2 , Typescript , .Net Core Web API V 1.0.1 And Entity framework Core 1.1.0 (Code First)

The First ChapterFlashback & Fears:
- The situation before the project few months ago,
- No one in the team have any experience in that technologies.
- .Net Core still in earlier stage and not mature enough “As we thought”.

Chapter 2: Taking the Risk Decision
As most of IT people we like to know and follow the new technologies, so we did self-study as preparation without our manager know J .
After we got some self-confidence we encouraged to take the decision and speak to the manager After short negotiation with our manager we got the approval to do the next project using the new awesome tech.

Chapter 3: Technical Challenges
We encountered many challenges during the project specially the kickoff initial stages like:
- How to implement JWT using mixed mode Active directory & Forms authentication.
- How we will set our Solution Architecture.
- Because Our UI/UX team decided to use payed template that uses Many jQuery Plugins So:
o   How we will use jQuery plugins inside Angular 2 App and fixing the problems, I think I will write separated post regarding this because we encountered many problems for each plugin
o   “don’t worry after we get know how we deal with jQuery inside Ng2 app it’s fun now”.

- IIS hosting NG2 app and routing.
- Other Usual problems here and there no fancy things.

Chapter 4: Our Solution Architecture & Tools

- We are using our customized DDD “Domain-Driven Design” As following images:

- Visual Studio Team Services as source control and project management.
- Our Front-end Just Angular 2 App talking to .Net Core Web API.
o   We use “Webpack Angular Starter kit “by Angular class team @AngularClass , you can found it here

- Using Visual Studio Code for frontend solution
- Typescript 
- WebPack as module bundler included in the starter Kit @AngularClass you can read more here .

- Using some awesome vs code extensions:

Chapter 5: Our feedback/feelings after finish the first stage:
-        We fall in love with this awesome technology combination,
-         Hmm but why?
o   Angular 2 Side:
§  It’s totally framework not just another js frontend library “its good choice for large projects”, Everyone know what to do in specific steps and architecture defined by angular e.g. inject service, routing, etc.
§  Single page App is totally amazing “CoOoool”.
§  Using Typescript make you feel strong J in frontend development.   
§   Love using VS Code with angular 2.
§  Angular 2 lifecycle-hooks help a lot specially in solving jQuery issues.
§  We like angular 2 Observables and async pipes concepts.

o    .Net Core Side:
§  We like .Net Core remarkable performance.
§  Entity framework core “Code First”: no much changes that makes you spend long time to learn
§  With .Net Core you feel control over everything, inject what you need only not all framework, control lifecycle, add middleware interceptors etc...

 Finally I hope this will help someone. 

Thursday, February 2, 2017

Angular 2 , Web API Core & Entity Framework Core Disable Cache / json Caching

Scenario :
We encounter problem that when we edit entity and try to view its details or edit it again we get the old values.
So the response json result is cached !!!

We are using  Awesome .net Web API Core + Entity Framework Core + Angular 2 :) "Amazing right"
So how we disable the caching / response json result !!!

- First i think about response header Cache related headers :
So i modified my Web API Core Service to disable Cache like the following:

- You can achieve this by adding this to your Controller action or over all Controller:
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]

- Guess what :) !!! Still not working hahaa

- After that i think from Angular perspective ,So i added timestamp to the current http request like this :

- Guess what :) !!! Also Still not working hmmm ok nice try.

- So i tried to think again from the perspective of EF Core , And add the ".AsNoTracking()" at the end of my query to disable EF cacheing .

- Guess what :) !!! WOrrrrrking Yaaaaaaaaaa :)

Thanks and i hope this will help someone over the univers

Wednesday, February 1, 2017

Angular 2 Change Date Format using code, from .ts code file.

Scenario :
I need to change the date format from my .ts code file .

Solution :
We take advantage of , already exists angular 2 "DatePipe" , like the following :

// ----------- Inside My Component Controller .ts file ----------------------

import {  DatePipe } from '@angular/common';

    providers: [DatePipe]

        private _datePipe: DatePipe,

           let datePipeTest = this._datePipe.transform(this.task.scheduledStart, 'dd/MM/yyyy');