Learning Angular

I would like share some of the resources which was useful for me while learning Angular and continue to give more insights in to the platform.

There are many experts in the Community & from the Angular team which share lot of in depth information which helps us understanding the platform better and implement it correctly in our projects.

Visual Studio Code – Angular’s favorite editor

Download – Visual Studio Code

Visual Studio Code is an open source editor which makes your learning Angular more easier and joyful with it’s powerful Intellisense and extensions. It has got native support to Typescript and writing code in this editor is such a breeze.

Angular expert John Papa has blogged useful VS Code extensions for Angular and highly recommended to install those.

Stackblitz – Powerful online editor for Angular, React or Ionic

URLhttps://stackblitz.com/

What if you don’t want to install any IDE’s on your PC or you’re using a virtual machine and have access to web browser, no worries, Stackblitz rescues you!

Typescript

Before jumping on to Angular, one should have some knowledge on Typescript. Microsoft has written very handy handbook and it covers the language features. Apart from this, Angular University has a blog post which has curated information which gives quick overview of the Typescript and it’s advantages in video’s mode.

Angular

Angular.io maintained by Angular team and they’re updating it with more relevant information constantly. It’s PWA (Progressive Web App) and it’s loads faster. I always stick this site to my desktop for quick reference of the API’s.

Angular In Depth is maintained by Max also known as NgWizard who has blogged valuable information about Angular and I highly recommend to subscribe to his medium. Personally, I learnt got to know more in depth information on Angular features like –  Change Detection, Ng Zones, Dynamic Component Loading, Library creation etc.,

Angular Training Book by Rangle.io which gives quick overview of Angular and all it’s features from ECMAScriptTypescript,  Angular, rxjs, Jasmine Unit test cases etc.,

Demos With Angular YouTube channel by Stephen Fluin, core developer on Angular Team who share short bytes of best practices of using Angular. Highly recommended to watch those quick short videos to catch up on learning Angular in depth.

Rxjs – Reactive Programming

Angular is mix of technologies and the important one is rxjs (This is a beta site which is mich more cleaner than the previous one looks similar to Angular.io). It’s offers reactive programming with the help of Observables.  Wait… Observables… I know promises What’s Observables?  You can check this cool YouTube video by Jeremy Lund. It has many operators which you can apply on the Observables and you can learn here – Learn Rxjs with much more simple way!

 

 

Thanks!

React is FAST in what sense?

Today I was debating with my colleague on how React is fast and in what sense? It was interesting discussion and we thought of exploring on this context, hence blogging it for my reference!

I assume, you’ve knowledge on React JS framework before reading this article!

React is FAST in the sense of DOM updates!!!

How React is fast in updating the DOM (Document Object Model) ?

  1. React creates Virtual DOM (React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a “virtual DOM”) for every component.
  2. Tracks for the changes happening in the react component and updates the Virtual DOM.
  3. Reconciliation happens with the actual DOM for the changes in the Virtual DOM.

It’s all the React magic of transforming the model changes to views!

I’ve come across few blogs posts where they explained the inner details of the React JS and Virtual DOM. Here are few of them –

Real Benefits of React JS Virtual DOM

React: The Virtual DOM

VideoTech Talk : How React.js works

Happy Programming!

Web Tool – Create React App

Facebook has come up with one of the best JavaScript frameworks to build fast & scalable web apps. In this fast paced web development world, with countless dependencies, build frameworks & utility libraries, we may be spending time in choosing the right one’s get started.

May be Facebook would thought through this and they came up with a tool – create-react-app. This tools allows to create react app within no time.

I personally tried this tool for getting started with creating a HelloWorld react app and I did it in few mins!

create-react-app is a CLI which helps scaffolds all the required libraries and build frameworks and help us to focus on building the app without worrying on the setting up the project!

Here is the cool user guide on how to use this tool!

Happy Programming!

Get started with Web

Web is very powerful! It almost replaced the desktop environment. Here are the few resources to get started with Web development –

  1. Codecademy
  2. CodeSchool
  3. Google Web
  4. Mozilla Developer Network
  5. Microsoft Virtual Academy  – Lot of cool video courses available for FREE!
    1. Getting Started with Web Technologies
    2. The Modern Web Platform Jump Start

  6. Udacity Courses ( FREE )

 

Happy learning!!!

Web Tools from Microsoft – modern.IE

I was amazed with the amazing tools provided by Microsoft for Web developers and they hosted a website specially for these tools – modern.IE

So, I’m planning to brief about the Tools in modern.IE site in this post. Let’s see what’s in?

Website Tile – I love this feature! It allows to create Windows Tile in few seconds. Allows the user the user to pin the website to their Windows 8 start screen.

Virtual Machines – It provides virtual machines for different platforms – PC, Mac and Linux. Allows to test your website on different versions of Internet Explorer from your Mac or Linux.

Site Scan – This is a service which allows you to scan your website for coding problems. It helps developers to improve the performance of the site by fixing the pitfalls. It’s Open Source!

Compatibility Scan – It allows to scan your website for your code which is no longer supported and you can update it! This is very useful for outdated browser support especially for < IE 9+ versions.

Browser ScreenShots – It takes the screenshots of your web site in different browser on various platforms includes Mobile Safari and Android.

Developer Channel – Like Firefox and Chrome, IE started pushing nightly build with upcoming features enabled on it! It allows the developers to test the upcoming features in IE to take advantage of latest features!

It has much more in it including Community Support, MSDN resources etc., It’s all yours to explore the hidden information!

Happy Website – IE programming!!!

Build Hybrid Apps Online with Adobe PhoneGap Build

The Pain area while creating Hybrid Mobile Apps is building to multiple Platforms. I’m NOT saying it’s too difficult, also, it’s not simple process. How it will be if you have a tool which does this BUILD process automated for different platforms? Super Cool… Isn’t it!

It’s Adobe PhoneGap Build tool! Adobe offers this as a CLOUD service, where you don’t need to install any Software on your PC/MAC. Great, Thanks to Adobe for making this. Personally, i love this 🙂

How to use this Adobe PhoneGap Build?

Before going to know about this tool, be ready with your source code for HYBRID Mobile App which includes – HTML, CSS and JavaScript.

Now, visit the PhoneGap Build URL – https://build.phonegap.com/. Register yourself. You have FREE and also PAID plans and it totally depends on your needs. If you are OSS developer, then FREE plan should be fine.

Once you logged in, you may have to click on + new app

newapp

It allows you to pull the code from GIT repo. It can be a Public or Private repo. To build Private repo’s you may have to pay for it and maximum number of Apps you can create is 25(with single login)!

newapp

I have pushed a demo app to Git to test this PhoneGap Build and if you wish to try out, you can use it. It’s https://github.com/roopeshreddy/PhoneGapAppDemo/

Once you have entered your .git URL, you can click on pull from .git repository. This will fetch the source files from Git and make it ready for BUILD.

NOTE: You can also upload zipped folder instead of .git repo!

Now, it will be ready to create BUILD. You can edit the name of the application, enable debugging etc.,

newapp

Once all the options are set, click on Ready to Build which will create respective installer files for different platforms!

Untitled

Aaah, we are ready with installer files for different Platforms. Just click on the platform icons to download the respective installer file.

As of now, Adobe PhoneGap Build supports following platforms –

  • iOS
  • Android
  • Windows Phone
  • BlackBerry
  • HP WebOS
  • Symbian

NOTE: As per the Official blog of Adobe PhoneGap, they are depreciating BlackBerry, HP Web OS and Symbian Platforms. you can ready more about it here – Phone Gap Platform depreciations

Happy Mobile App Development!

Firefox browser tool to test Responsive Web design

Modern web browsers are more developer friendly, by providing Developer Tools to make web development easy. Thanks to Mozilla for integrating a feature, which allows to test the Responsive Web design with out using various physical devices.

How to use Responsive Web Design feature in Firefox?

  1. Launch Mozilla Firefox(Latest Version).
  2. Browse the website which you wish to test. For example – i will take – http://tickletheweb.com website, which is developed to have consistent view across the devices.

image

3.   Click on Firefox button on the left top corner of the browser, and select Web Developer –> Responsive Design View.

image

4.  It loads the Responsive Design View chrome –

image

5.  Select different resolutions from the dropdown control on the left corner of the chrome to test the website in different resolutions, which is simple and great.

image

6.  It also allows to test  Portrait or Landscape orientations. Click on rotate button, which toggles between the orientations.

image

Happy Web programming!!!