Question

Outline, using suitable coding examples, the advantages and disadvantages of using a JavaScript framework, such as AngularJS. Demonstrate how you could use AngularJS to create a simple Navigation Menu

Answer 1

Advantages of JavaScript Framework -

• Built-in HTML templating: Data displayed within your site’s markup is cleanly formatted and easy to read.
• Component-based design: Representing site content through self-contained components is the norm. This enables content reuse and provides a standard model for content structure and behavior.
• Extended Functionality. Third party add-ons like Greasemonkey enable JavaScript developers to write snippets of JavaScript which can execute on desired web pages to extend its functionality.
• Popularity. JavaScript is used everywhere in the web. The resources to learn JavaScript are numerous. StackOverflow and GitHub have many projects that are using Javascript and the language as a whole has gained a lot of traction in the industry in recent years especially.
• Build system support: Build tools allow developers to use ES2015+ features, preprocessors such as JSX to write HTML within JS, and write code modules that are bundled and minified for fast downloads. Developers can write use new JavaScript features without fearing legacy browser incompatibility.
• Versatility. Nowadays, there are many ways to use JavaScript through Node.js servers. If you were to bootstrap node.js with Express, use a document database like mongodb, and use JavaScript on the front-end for clients, it is possible to develop an entire JavaScript app from front to back using only JavaScript.
• Robust data management: Application state is managed within the framework’s data models instead of scattered throughout the DOM.
• Server Load. Being client-side reduces the demand on the website server.
• Faster performance: Web page content updates are only written when necessary. To-be-rendered content is maintained in a virtual DOM and is rendered to the actual DOM when content changes occur.

Disadvantages of JavaScript Framework -

• Client-Side Security. Because the code executes on the users’ computer, in some cases it can be exploited for malicious purposes. This is one reason some people choose to disable Javascript.
• Browser Support. JavaScript is sometimes interpreted differently by different browsers. Whereas server-side scripts will always produce the same output, client-side scripts can be a little unpredictable. Don’t be overly concerned by this though - as long as you test your script in all the major browsers you should be safe. Also, there are services out there that will allow you to test your code automatically on check in of an update to make sure all browsers support your code.

• Application Programming Interface (API). Most of the developers encounter is the Application Programming Interface (API) keeps on changing at frequent intervals and does not remain stable. At times, a new API appears having a number of backwards-incompatible changes.

• Asynchronous Programming Model. If you want to make the applications more scalable, the necessary requisite is adoption of the asynchronous programming model. However, many developers may find this programming model to be more difficult in comparison to the linear blocking I/O programming.

Code of AngularJS to create a simple Navigation Menu -

/*-------------------------
   Simple reset
--------------------------*/

*{
   margin:0;
   padding:0;
}

/*-------------------------
   General Styles
--------------------------*/

body{
   font:15px/1.3 'Open Sans', sans-serif;
   color: #5e5b64;
   text-align:center;
}

a, a:visited {
   outline:none;
   color:#389dc1;
}

a:hover{
   text-decoration:none;
}

section, footer, header, aside, nav{
   display: block;
}

/*-------------------------
   The menu
--------------------------*/

nav{
   display:inline-block;
   margin:60px auto 45px;
   background-color:#55B460;
   box-shadow:0 1px 1px #ccc;
   border-radius:2px;
}

nav a{
   display:inline-block;
   padding: 18px 30px;
   color:#fff !important;
   font-weight:bold;
   font-size:16px;
   text-decoration:none !important;
   line-height:1;
   text-transform: uppercase;
   background-color:transparent;

   -webkit-transition:background-color 0.25s;
   -moz-transition:background-color 0.25s;
   transition:background-color 0.25s;
}

nav a:first-child{
   border-radius:2px 0 0 2px;
}

nav a:last-child{
   border-radius:0 2px 2px 0;
}

nav.home .home,
nav.team.team,
nav.about .about,
nav.contact .contact{
   background-color:#5867E3;
}

p{
   font-s
   color:#7d9098;
}

p b{
   color:#ffffff;
   display:inline-block;
   padding:5px 10px;
   background-color:#DC64C6;
   border-radius:2px;ize:22px;
   font-weight:bold;
   text-transform:uppercase;
   font-size:18px;
}

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8"/>
  

       <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />

       <!-- The main CSS file -->
       <link href="style.css" rel="stylesheet" />

       <!--[if lt IE 9]>
           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
       <![endif]-->
   </head>

   <!-- The ng-app directive tells angular that the code below should be evaluated -->

   <body ng-app>

       <!-- The navigation menu will get the value of the "active" variable as a class.
           The $event.preventDefault() stops the page from jumping when a link is clicked. -->

       <nav class="{{active}}" ng-click="$event.preventDefault()">

           <!-- When a link in the menu is clicked, we set the active variable -->

           <a href="#" class="home" ng-click="active='home'">Home</a>
  
           <a href="#" class="about" ng-click="active='about'">About</a>
           <a href="#" class="contact" ng-click="active='contact'">Contact</a>
       </nav>

       <!-- ng-show will show an element if the value in the quotes is truthful,
           while ng-hide does the opposite. Because the active variable is not set
           initially, this will cause the first paragraph to be visible. -->

       <p ng-show="active">You chose <b>{{active}}</b></p>

       <!-- Include AngularJS from Google's CDN -->
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
   </body>
</html>