Category: Web

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’s almost replaced the desktop environment. Here are the few resources to get started –

  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!!!