Amfas Tech | Technology, Blogging & Internet Marketing: JavaScript

What Are The Top Mobile JavaScript Frameworks and Why?

The popularity of JavaScript is keeping rising. And last year, we have observed some of the wonderful changes as AngularJS upgrade entirely, development of ECMAScript, launching of Angular 2, two major updates of Node.js. etc. Therefore, there is a lot more that we can expect from 2017 as more and more people are looking forward to using JavaScript.


As of May 2017, GitHub reveals that there are approximately 1.1 million JavaScript projects and more than 500 thousand usable packages on npmjs.org with approximately 10 billion downloads every single month. Lately, IBM declared JavaScript as the best programming language to learn in 2017.


As we all know that JavaScript becomes a promising programming language for web development, but what about mobile app development? Does it fruitful for the mobile app too? In this post, you can find about the top mobile JavaScript frameworks and why they are leading on top.


Top JavaScript Frameworks For Mobile App Development

React Native

React Native is the most advanced native framework that allows to developing mobile apps using JavaScript only. The framework makes use of the same design as React, allows users to compose a rich mobile UI from declarative components.


Using this framework, users can build native Android and iOS applications in JavaScript without learning Java or Objective-C programming languages. It uses the exact same fundamental UI building blocks as regular iOS and Android applications. You can keep those building blocks together using JavaScript and React.


Top Features of React Native Framework:

  • The framework has own DOM, so this framework calculates changes required in advance and updates accordingly.
  • React Native mainly focuses on UI, giving responsive interface, so keep an application running smooth and without any interruptions.
  • The framework runs on the server and virtual DOM reduced to the browser, resulting page allows search engine indexing with ease and favors all SEO processes.


Ionic

Iconic is the most powerful, free and open source mobile SDK that can be used to develop native and progressive web applications with ease. Considered as the easiest framework to learn, this framework is a great choice for all the less experienced developers, who are looking forward to developing an app. Moreover, the framework has a completely great community and documentation, so again it is beneficial for the newbie developers.


A Range of Iconic Features:

  • Users can build their apps, customize them for Android or iOS and deploy through Cordova.
  • The framework includes mobile components, interactive paradigms, typography and an extensible base theme.
  • Developers, who are using Iconic, can control the scroll-view so that they can get the scroll position and get information about the current scroll-view instances.


Angular JS

Angular JS is the widely used JavaScript framework for hybrid mobile app development as this is one such framework that offers seamless native-like experiences.


Currently, single page web applications are highly popular, so Angular JS is a right tool that accomplishes it using commands. Directives are extremely helpful when it comes to adding reusable code in the app to incorporate dynamic functionality.


This framework offers all the features that Bootstrap 3 is missing. Moreover, it also comes with top components like overlays, sidebars, switches, absolute positioned navigation bars, etc.


Top Features of Angular JS:

  • Offers Easy testing of any app part and two-way data binding
  • It is the most JS framework for SPAs (Single-Page Applications)
  • They framework claims to have the largest community of developers
  • It offers the best option for enterprise-based apps with high-standards for code readability.


jQuery Mobile

jQuery Mobile framework is also a high-end framework that follows the write less, do more mantra and take it to the next level. Rather than writing a completely new and unique app for each mobile device of OS, this framework allows you to design a single highly-branded responsive website or app that work on all popular smartphone, desktop and tablet platforms.


jQuery Mobile Framework Features:

  • jQuery framework is built on top of jQuery core, so it has a minimal learning curve for people that are already familiar with jQuery syntax.
  • Theming framework, allowing the creation of custom themes.
  • HTML5-driven configuration for laying out pages with minimal scripting.
  • UI widgets, which are touch-optimized and platform agnostic.


Vue.js

Vue.js is an extremely lightweight progressive framework that can be used for building user interfaces. The framework’s core provides a React-like virtual DOM-powered view layer that can be integrated with some of the other obtainable libraries. However, the framework has an ability to power single-page applications.


The framework makes use of an HTML template syntax to bind the DOM to instance data. In addition to this, models are plain JavaScript objects that update the view when data is changed. Some of the additional tools also offer facilities for routing, animations, state management, scaffolding, etc.


Vue.js Framework Features:

Simple to get started with high level of among developers.

  • All the above-mentioned JavaScript mobile app development frameworks can be used easily without having in-depth knowledge of objective to develop iOS app or Java to develop an Android app. Using these best JavaScript frameworks developer satisfaction
  • Rapid adoption and increasing popularity
  • Offers good performance with small dependency


Why these frameworks are popular?

These mentioned frameworks have already reshaped the entire way how JavaScript collaborates with HTML and CSS in order to compile views both in browsers and on native platforms. You can notice that various mobile app development companies are using these JavaScript frameworks to develop a high-end mobile app that performs exceptionally.



Author Bio: Jyoti Bharwani is a Content Manager at Space-O Technologies. She has a keen interest in writing related to mobile app development and app marketing. In free time, she prefers to read non-fiction books. To follow her on Twitter.

Continue Reading

Reading Mode Widget/Plugin for Blogger and WordPress

Blogging is not all about creating content. It is also about gaining loyal readers. Apart from the quality of the content you provide, the visibility and readability of the content also matters. To be specific, readability includes font styles, backgrounds and eye-friendly modifications to the text on the webpage.

It is however difficult to modify the styles according to individual reader’s choice. So, it is better to leave that option to the reader himself. We have developed a simple and useful snippet of HTML/JS that allows the users change the font styles and sizes according to their eye feasting taste.

Reading Mode widget for blogger wordpress from amfastech

Copy the follow snippet of code and install it on your Blogger/WordPress blog.
<script>
function myFunction() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Open Sans";
}
function myFunction2() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Roboto";
}
function myFunction3() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Calibri";
}
function myFunction4() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Calibri";
}
function myFunction5() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="PT Sans";
}
function myFunction6() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Georgia";
}
</script>
<button type="button" onclick="myFunction()">Style 1</button>
<button type="button" onclick="myFunction2()">Style 2</button>
<button type="button" onclick="myFunction3()">Style 3</button>
<button type="button" onclick="myFunction4()">Style 4</button>
<button type="button" onclick="myFunction5()">Style 5</button>
<button type="button" onclick="myFunction6()">Style 6</button>

Customization

Change the ID “Blog1” with the blog post area of your blog. “Blog1” here is the blog post area of Blogger blog.

Change x.style.fontSize with the values of your choice.

Change x.style.color with the color of your choice.

Change x.style.fontFamily with the font family of your choice.

This is a basic script and needs to be tweaked. Any suggestions of the tweaks from your side are welcomed. You suggestions will be credited and updated in the article.
Continue Reading

Validating HTML5 forms without using JavaScript

Form validation is a process where you write code for forms and validate them using another piece of custom code. It is to make sure all inputs are filled with content they are supposed to be filled with. Validation is done in two ways: on the server side and the client side. The server side validation code runs on server to check all the fields and if the requirements are not met, the page will be reloaded with errors. The client side validation works the pretty same way. But the only difference is server side validation runs after the form submission where as client side validation runs before the form is submitted. The best kind of validation is when you do both. The client side validation gives the user an immediate response and the server side validation makes sure response wasn’t being hacked.

Generally, JavaScript is preferred technology for form validations on client side. Writing form in HTML and validating forms using JavaScript really sucks. We’ll have to check two piece of codes when any run-time errors are found. Swapping between the codes would kill your patience. HTML5 doesn’t need JavaScript for validations on client side as the new input types are introduced for validations with it.

In HTML5 the <input> tag has the ability to validate the information in the form. If it validates, proceeds to the submission and if it doesn’t, shows errors.

Let’s see the form validation in both conventional(HTML+JavaScript) and new(HTML5) ways.

Validating forms with HTML+JavaScript:

HTML Form:
<!DOCTYPE html>
<html>
<body>
<form name="myForm">Quantity (between 1 and 5):
<input max="5" min="1" value="11" name="quantity">
<input type="submit" value="Submit Query"></form>
</body>
</html>
JavaScript:
<script>
if(document.myForm.quantity.checkValidity() === false){ alert('fail'); } </script>

The above script will check the ‘quantity’ field and validates the input given in it. When the value is greater than 5, the trigger will be fired. This type of validation is a good practice if only some fields are to be validated in a form. Let us suppose we have 30 fields to be validated. Writing 30 validation lines of code isn’t necessary and it is a worst practice of coding.

You can simply write the following script that does validation of all form fields:
<script>
if(document.myForm.checkValidity() === false){ alert('fail'); }
</script>

‘myForm’ is the name of the form and it is enough to validate the fields.

Validating forms in HTML5:

Validation criteria in HTML5 is quite different and simpler than before. There is no need to use JavaScript for every small validation of the input fields. Some new ‘input’ tag attributes were introduced with HTML5. They take care of input field validations very well.

The required attribute:

The required attribute can be simply added to the input tag at the end. When the form filler misses out the field, a pop up notifies about that mandatory field to be filled.

For e.g.,
<input type="number" name="quantity" min="1" max="5" required/>

The ‘min’ and ‘max’ attributes see if the value entered is with in the range. If the out of range value is entered, it shows validation error.

The pattern attribute:

The pattern attribute is pretty slick, and is for people who write regular expressions. If you write a regular expression to the pattern attribute, your input will validate against the pattern in order to have the return value true.

For e.g.,
<input type="text" name="quantity" pattern="[0-5]{1}" />

Notice that the type was changed to text in order for the pattern to make the input invalid; we need to remove the number type, as that will supersede the validation criteria. If the type and pattern conflict (by requiring results that exclude each other), the validation criteria will never be met, and the form will never validate.

The measurable attributes:

Some input types have comparative criteria such as email, which require a strict input pattern. Other input types have attributes such as min and max that must be satisfied before the input can be considered valid. Let’s look at our first input example again:
<form name="myForm">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5" />
<input type="submit" />
</form>

In this case the number that is input must meet the min and max criteria in order to be considered valid. For example, the number 11 would not validate but the number 4 would validate. In a similar manner we have the email type:
<form name="myForm">
Enter Your Email: <input type="email" name="myEmail" />
<input type="submit" />
</form>

The email type looks for a value that meets traditional email criteria that would match a regular expression such as this:

var emailTest = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

If the value of the input doesn’t have a username, an at sign (@), and a domain, it’s considered invalid.

That's all for now! till next time! keep visiting amfastech.com
Continue Reading

3 different techniques for redirecting old websites to new URL

Whenever you wanted move your domain to a new one and you don’t want to loose the traffic that is coming for old website, you should opt for redirection. Redirecting old websites to new URL is not that hard to implement. It can also be done in client side by using simple JavaScript in the website code.




Note: Implement either of the following codes inside <head>…</head> section. Don’t forget to remove the comment tags( ‘<!—’ ,‘–>’ ,’//’and ‘/*…*/’) before you save the changes after implementation.

Method 1: Simple redirection

This method has simple code of redirecting to new website’s URL. Copy the code below and paste it in the <head>…</head> section. Replace http://www.newlocation.com with your new website’s URL.
<script type="text/javascript"> <!-- window.location="http://www.newlocation.com"; //--> </script>

Method 2: Show message before redirection

This method of redirecting features a popup message in old webpage. You can customize the message in the code below before implementing it in your website/blog. To do so, replace you will be redirected to main page in 10 sec with the text of your wish.
<script type="text/javascript"> <!-- function Redirect() { window.location="http://www.newlocation.com"; } document.write("You will be redirected to main page in 10 sec."); setTimeout('Redirect()', 10000); //--> </script>

Did you figure out why it takes 10 seconds to your page to redirect to the new URL? The part of the code setTimeout(‘Redirect()’,10000) is responsible for that delay. It actually means that the function Redirect() would be redirected after ten seconds of timeout. You can change this timeout delay also to the time you wanted.

Remember, 1 second here represented as 1000 and so it was specified as 10000 for 10 seconds of timeout. Keep that in mind before setting the timeout.

Method 3: Redirecting based on their browsers

This method of redirection allows the old website to be redirected to particular URL based on the web browser it is opened in. See the code below,
<script type="text/javascript"> <!-- var browsername=navigator.appName; if( browsername == "Netscape" ) { window.location="http://www.location.com/ns.htm"; } else if ( browsername =="Microsoft Internet Explorer") { window.location="http://www.location.com/ie.htm"; } else { window.location="http://www.location.com/other.htm"; } //--> </script>

You can customize the URL’s based on the compatibility of the browsers it is opened in. The URLs in window.location are supposed to be customizable.

Don’t forget to remove the comment tags before saving the changes after implementation of the codes above.
Continue Reading

How The Totally Different Technologies, HTML5 & JavaScript Hooked Up

HTML and JavaScript are from different planets for sure. The proof? HTML’s DNA is made of declarative markup that allows you to describe a set of nested elements that make up your pages. JavaScript, on the other hand, is made of pure algorithmic genetic material, meant for describing computations.

Are they so far apart they can’t even communicate? Of course not, because they have something in common: the DOM. Through the DOM, JavaScript can communicate with your page, and vice versa. There are a few ways to make this happen, but for now lets concentrate on one. It’s a little wormhole of sorts that allows JavaScript to get access to any element, and it’s called getElementById. Let’s see how it works...

Let’s start with a DOM. Here’s a simple DOM; it’s got a few HTML paragraphs, each with an id identifying it as the green, red or blue planet. Each paragraph has some text as well. Of course there’s a <head> element too, but we’ve left the details out to keep things simpler.

image
Now let’s use JavaScript to make things more interesting. Let’s say we want to change the greenplanet’s text from “All is well” to “Red Alert: hit by phaser fire!’ Down the road you might want to do something like this based on a user’s actions or even based on data from a web service. But we’ll get to all that; for now let’s just get the greenplanet text updated. To do that we need the element with an id of greenplanet. Here’s some code that does that:

document.getElementById("greenplanet");

-Remember the ‘document’ represents the entire page in your browser and contains the complete DOM, so we can ask it to do things like find an element with a specific id.

-getElementById: Here we’re asking the ‘document’ to get us an ‘element’ by finding the element that matches the given ‘id’.

-From the above simple code, getElementById(“greenplanet”) returns the paragraph element corresponding to “greenplanet”...

...and then the JavaScript code can do all sorts of interesting things with it..

Once getElementById gives you an element, you’re ready do something with it (like change its text to “Red Alert: hit by phaser fire!”). To do that, we typically assign the element to a variable so we can refer to the element thoughout our code; let’s do that and then change the text:

var planet = document.getElementById("greenplanet");
-We’re assigning the element to a variable named ‘planet’.
-Here’s our call to getElementById, which seeks out the “greenplanet” element and returns it.

And in our code we can now just use the variable planet to refer to our element.

planet.innerHTML = "Red Alert: hit by phaser fire!";
-We can use the innerHTML property of our planet element to change the content of the element.
-We change the content of the greenplanet element to our new text... which results in the DOM (and your page) being updated with the new text.

image

Any changes to the DOM are reflected in the browser’s rendering of the page, so you’ll see the paragraph change to contain the new content!

[Sources: Head first HTML5 programming]
Continue Reading