open source tool for remotely debugging and testing JavaScript in mobiles

Generic Way:

You need to connect the phone to your network and open your local host if you need to use the IE browser
Your machine has a network IP that will be accessible from the phone if you are on the same network

try http://www.vorlonjs.io/ – Vorlon.JS is an open source tool for remotely debugging and testing JavaScript.

A paid version of something as cool is https://www.vanamco.com/ this handles all your devices.

Also try something like Weinre?
http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

 

Sources: Radu Micu, Leigh Clancy

Angular2 vs Angular1.3

 

Angular2

1.  Angular2 performance

Be default, Angular2 performance will be good. Still you can improve the angular2 performance of your application using following ways

A.     HTTP/2

i.         Use HTTP/2 to load assets parallel from server which increases performance up to 30-50%.
ii.         Reference: http://www.zackarychapple.guru/angular2/2016/05/31/tour-of-heroes-http2.html

B.     Use gulp-inline-ng2-template

i.         Inline angular2 HTML and CSS files to JavaScript and Typescript files
ii.         Reference: https://github.com/angular/angular/issues/4328
iii.         https://github.com/ludohenin/gulp-inline-ng2-template
2.  Angular 1.3 vs 2
A.     Angular2 written in Typescript and meets the ECMASCRIPT 6 specifications.
B.     Angular2 is entirely component based. Controllers and $scope no longer used. Components are directives with a template.
C.     Form validations are easier in angular2
D.     Angular2 support for native mobile – iOS and Android
E.     Angular2 support for server side rendering. Angular2 provides more choices of languages. You can use any of the language from ES5, ES6, TypeScript or Dart to write Angular 2 code.
F.     Improved testability in angular2.

G.     Support to migrate from angular1.x to 2 using ng-upgrade.

References: http://blog.angular-university.io/introduction-to-angular2-the-main-goals/
https://dzone.com/articles/typed-front-end-with-angular-2

Apart from Angular2 features like performance, mobility, testability etc. We can see the major differences in syntaxes for angular 1.x and angular 2 versions. Few major changes are listed below.

Angular 1.3

Angular 2

Plan JavaScript ES6 Specification
Not built with mobile support Built with mobile support
Easy to setup and Difficult to create directives, controller files manually. Simple to setup and use it using angular-cli
Controllers and scope to maintain logic Components with minimal syntax
Bootstrapping using ng-app Made a simpler bootstrap
Structural directives like ng-repeat, ng-if been changed. *ngFor, *ngIf syntax changed.
You cannot use HTML DOM element properties and events in angular 1.x. Instead we have to use ng-href, ng-src, ng-show etc. You can use directly HTML DOM element properties and events in angular2.
Services are defined in 5 ways like factory, service, provider, constant and values We will use Injectable here
$scope plays major role here which could be harmful in some ways. No scope in angular2.
Dependency Injection achieve via controllers DI achieves via constructor in classes
Form validations are difficult to apply Its very easy with in-built syntaxes.
No Server Side Rendering Server Side Rendering is possible

Reference: http://www.talkingdotnet.com/difference-between-angular-1-x-and-angular-2/
http://eisenbergeffect.bluespire.com/all-about-angular-2-0/

3.  how to Upgrade from angular 1.3 to angular2

Here is an example of what an Angular 1 project upgrade to Angular 2 may look like.

  1. Include the Angular 2 and ng-upgrade libraries with your existing application
  2. Pick a component which you would like to migrate
  3. Edit an Angular 1 directive’s template to conform to Angular 2 syntax
  4. Convert the directive’s controller/linking function into Angular 2 syntax/semantics
  5. Use ng-upgrade to export the directive (now a Component) as an Angular 1 component (this is needed if you wish to call the new Angular 2 component from an Angular 1 template)
  6. Pick a service which you would like to migrate
  7. Most services should require minimal to no change.
  8. Configure the service in Angular 2
  9. (optionally) re-export the service into Angular 1 using ng-upgrade if it’s still used by other parts of your Angular 1 code.
  10. Repeat doing step #2 and #3 in an order convenient for your application development
  11. Once no more services/components need to be converted drop the top level Angular 1 bootstrap and replace with Angular 2 bootstrap.

How ever,

  • The new Angular 2 router is being backported to Angular 1, and will allow the same application to have both Angular 1 and Angular 2 routes
  • It will be possible to mix Angular 1 and Angular 2 components in the same application
  • It will be possible to inject services across framework versions
  • Data binding will work across versions as the two change detection mechanisms will be integrated.

References: http://blog.angular-university.io/introduction-to-angular2-the-main-goals/

https://angular.io/docs/ts/latest/guide/upgrade.html

http://angularjs.blogspot.in/2015/08/angular-1-and-angular-2-coexistence.html

4.  why Angular 2?

A.     Annotations

AtScript provides tools for associating metadata with functions. This facilitates the construction of object instances by providing the required information to the DI library (which will check for associated metadata when calling a function or creating an instance of a class). It will be also easy to override parameter data by supplying an Inject annotation.

B.     Child Injectors

A child injector inherits all the services of its parent with the capability of overriding them at the child level. According to requirement, different types of objects can be called out and automatically overridden in various scopes.

C.     Instance Scope

The improved DI library will feature instance scope control, which will become even more powerful when used with child injectors and your own scope identifiers.

 

D.     Dynamic Loading

This is a feature which is missing from the current version of Angular. It will be addressed by Angular 2.0, which will let developers add new directives or controllers on the fly.

E.     Templating

In Angular 2.0, the template compilation process will be asynchronous. As the code is based on the ES6 module spec, the module loader will load dependencies by simply referencing them in the component definition.

F.     Directives

In Angular 2.0 there will be three kinds of directives: Component Directives, Decorator Directives, Template Directives

G.     Routing

The router in Angular 2.0 has been reworked to be simple, yet extensible. It will include the following basic features:

  1. Simple JSON-based Route Config
  2. Optional Convention over Configuration
  3. Static, Parameterized and Splat Route Patterns
  4. URL Resolver
  5. Query String Support
  6. Use Push State or Hashchange
  7. Navigation Model (For Generating a Navigation UI)
  8. Document Title Updates
  9. 404 Route Handling
  10. Location Service
  11. History Manipulation

H.    Child Router

The child router will convert each component of the application into a smaller application by providing it with its own router. It will help encapsulate entire feature sets of an application.

I.      Screen Activator

This will give developers finer control over the navigation lifecycle, via a set of can* callbacks:

canActivate – Allow/Prevent navigating to the new controller.

activate – Respond to successful navigation to the new controller.

canDeactivate – Allow/Prevent navigation away from the old controller.

deactivate – Respond to successful navigation away from the old controller.

These callbacks will allow the developer to return Boolean values, a Promise for that value, or a Navigation Command (for a lower level control).

J.       Logging

Angular 2.0 will contain a logging service called diary.js—a super useful feature which measures where time is spent in your application (thus enabling you to identify bottlenecks in your own code).

Reference: https://www.sitepoint.com/whats-new-in-angularjs-2/

5.  Angular Security

 

https://angular.io/docs/ts/latest/guide/security.html

Router example:

https://embed.plnkr.co/?show=preview

 

 

 

 

Debugging Javascript In Depth – Egghead Lessons Reference

Egghead explains..

If you’re writing apps that are targeting the browser, you likely know the pain and joy that is debugging. The pain is part of the process, and the joy is winning the battle and fixing the issue.

The goal is to minimize the pain and maximize the joy. Let’s get to the end game as quickly as possible, eh? 🙃

Luckily the last several years have seen massive improvements for web developers when it comes to debugging their applications. The Chrome Devtools have gone from useful to absolutely amazing and essential when creating web apps.

You’re probably familiar with the basics of using Devtools, but there is a lot of functionality that is often overlooked. We are releasing three short courses from mykola bilokonsky that are sure to give you new tools that will help make the journey from debugging pain to joy more quickly!

Please follow the following 3 links to get expertised in debugging:

https://egghead.io/courses/chrome-devtools-sources-panel

https://egghead.io/courses/chrome-devtools-network-panel

https://egghead.io/courses/using-chrome-developer-tools-elements

Devtools source panel:

https://egghead.io/lessons/tools-examine-a-running-app-with-the-chrome-debugger?course=chrome-devtools-sources-panel

Press F12 in default and open devtools

Points to remember:

  1. Right click and click “Reveal in Navigator” – we can see the structure of your project
  2. Check Scope section in debugger for local, closure and global scope
  3. Add watcher expressions(above call stack) to find the value of variable that bound to. Click on ‘+’ button on watch section to add a variable that changes value on difference scope.

debugging-javascript

4. SourceMap: Unbundle your javascript with source maps. If you enable source maps then it breaks bundle.js file into chunks and display with your structure folder i.e., it represents in components. If you unaware of enabling source maps in devtools then google it 😉

debugging-javascript1

5.create snippets that allows developers to play with devtools

https://egghead.io/lessons/tools-use-snippets-to-store-behaviors-in-chrome-devtools

Devtools make life easier to programmers to see DOM changes instantly by creating snippets.

Goto Sources from F12, click on snippets. create a new snippet,save and run to see my alert box on my page. Simple right? Try at your end now.

debugging-javascript2

Simple example from Egghead:

debugging-snippet

chrome-devtools-network-panel:

Handle ajax requests(xhr) in devtools->network. Hope everyone knew to play and work on this. If not, please have a look at below link.

https://egghead.io/lessons/tools-examine-ajax-requests-with-chrome-devtools?course=chrome-devtools-network-panel

https://egghead.io/lessons/tools-analyze-http-requests-and-responses-with-chrome-devtools

You can test slow network performance using throttling in devtools. Say your website loads very fast with wifi in office. Now you want to test your application performance on mobile devices with 2G/3G/4G data. Now how do you test in that way? Just go to devtools, open network tab and select throttling that you required to test based on speed. Thats it.

debugging-javascript3

tools-analyze-overall-network-traffic-using-overview-tool-in-chrome-devtools

https://egghead.io/lessons/tools-analyze-overall-network-traffic-using-overview-tool-in-chrome-devtools

click on overview button shows a big bar with milli seconds graph.If you want to see requests/response at particular time..just click on that place to see all like shown below.

debugging-javascript5

chrome-devtools-elements-panel: