Part 1: What can JavaScript really do in (functionality apps) ?
JavaScript is the most popular language in the last 5 years, especially after release ECMAScript 6 in 2015 with new features, JavaScript popularity grows immensely, Now you will find JavaScript in front-end, back-end, VR & AR and much more.
In Part 1 will talk about what JavaScript Can do in functionality applications
This series it will go deeper to JavaScript multi-skill stuff and what can it really do, with real examples and applications we will build together, So be ready for some coding in different categories with ECMAScript 6.
As shown in https://octoverse.github.com/ , JavaScript is the first-most popular language with 2.3M Pull request in 2017,
It showed how much importance of JavaScript in the programming field.
What is JavaScript? and who is author?
JavaScript (JS) is a programming language mostly used client-side to dynamically script web-pages.
Don’t confuse JavaScript with the Java programming language. Both “Java” and “JavaScript” are trademarks or registered trademarks of Oracle in the U.S. and other countries. However, the two programming languages have very different syntax, semantics, and uses.
Conceived as a server-side language by Brendan Eich (a then-employee of Netscape Corporation), JavaScript soon came to Netscape Navigator 2.0 in September 1995. JavaScript enjoyed immediate success and Internet Explorer 3.0 introduced JavaScript support under the name JScript in August 1996.
In November 1996, Netscape began working with ECMA International to make JavaScript an industry standard. Since then, the standardized JavaScript is called ECMAScript and specified under ECMA-262, whose latest (eight) edition is available in June 2017.
JavaScript can (Handle & Build functionality apps):
JavaScript is what is known as a client-side script. Most Web applications, such as a search engine, work because of an interaction between the user’s device (e.g. computer, phone or tablet) and a remote server. The software on the remote server sends information to the client (i.e. the user’s machine) and the software on the client side reads the information and renders a Web page on screen.
A client-side script is a programming language that performs its tasks entirely on the client’s machine and does not need to interact with the server to function. For instance, if you have a Web page loaded on your computer and your Internet service provider goes down, you are still able to interact with the Web pages already loaded on your browser. You will not, however, be able to navigate to new Web pages or access any data located remotely.
Some of the dynamic website enhancements performed by JavaScript are:
- Autocomplete
- Loading new content or data onto the page without reloading the page
- Rollover effects and dropdown menus
- Animating page elements such as fading, resizing or relocating
- Playing audio and video
- Validating input from Web forms
- Repairing browser compatibility issues
While JavaScript is a client-side language, some of its most powerful features involve asynchronous interaction with a remote server. Asynchronous simply means that JavaScript is able to communicate with the server in the background without interrupting the user interaction taking place in the foreground.
JavaScript can handle your website front pages by Document Object Model (DOM) in JS is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents by using JavaScript.
Ok let’s see example how we can do it
<p id=”intro”>Hello World!</p>
<p id=”demo”></p>
<script>
const myElement = document.getElementById(“intro”);
document.getElementById(“demo”).innerHTML = `The text from the intro paragraph is ${myElement.innerHTML}`;
</script>
But you need to know more about how it write and think with front pages with high performance & stable strong architecture to can build what you want.
You can explore more small apps about JavaScript & how it works with functions & events
1- Build 30 App by Vanilla JS in 30 days (Free Tutorials)
2- Build +100 App by Vanilla JS App with *The Coding Train* Channel on youtube
https://www.youtube.com/watch?v=17WoOqgXsRM&list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
3- My Simple Apps by Vanilla JS on GitHub
https://github.com/moumen-soliman/Javascript/tree/master/Budget%20App
https://github.com/moumen-soliman/Javascript/tree/master/DOM%20Manipulation%20in%20pig%20game
Last example was small one explain how can JavaScript works with HTML, If you beginner you can check Full JavaScript Style Guide on https://github.com/airbnb/javascript, But JS take a big role in front-end, let’s discover more.
The web is an increasingly dynamic platform, and thankfully JavaScript frameworks facilitate adding interactive functionality to websites. Even websites built with content management systems can embrace JS frameworks, and thus deliver dynamic content according to modern practices. If your site has dynamic content requirements, then consider adopting a modern JS framework, now there is big projects based on JS frameworks like instagram, youtube, facebook, google ..etc, The main justification for a JS framework is to deliver immediate feedback as visitors interact with your site. Traditionally, website content is generated on the server, and retrieving new content requires a page reload. For many years web developers have been augmenting this traditional format with JavaScript and AJAX, which allows web browsers to dynamically transfer data with the web server.
Modern frameworks have enhanced their techniques far past basic JavaScript/AJAX handling, improving both efficiency and code maintainability. Here are a few noteworthy modern features:
- Built-in HTML template: 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.
- Robust data management: Application state is managed within the framework’s data models instead of scattered throughout the DOM.
- 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.
- 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.
Using MV* Architectural Patterns:
- MVC (Model-View-Controller),
- MVP (Model-View-Presenter),
- MVVM (Model-View-ViewModel)
these patterns have been heavily used for structuring desktop and server-side applications but it’s only been in recent years that come to being applied to JavaScript.
List of some JS Libraries and Frameworks:
React.js
React.js was created by the team of Facebook developers and came out in 2013. Being pretty new in comparison with other JavaScript frameworks it confidently wins its niche. If you like the user interface of Facebook and Instagram then you might like React.js too. This very library is behind the front-end scenes of the two social giants. There are other companies that benefit from using it: Atlassian, BBC, Coursera, Dropbox, Flipboard, Netflix, Paypal, WhatsApp.
Angular.js
Generally, Angular.js it is one of the most beloved and used JavaScript frameworks for building single page applications. It is available as an open source solution and is supported by Google. The latter is a convincing argument in favor of Angular to become a front-end solution for a web app. Angular JS is highly preferred for hybrid mobile application development. Featured with components like overlays, sidebars, switches and absolute positioned navigation bars, this framework incorporates dynamic functionality to the application.
Vue.js
Introduced back in 2016, Vue has a learning curve that is easier1. The framework delivers two-way data binding, server-side rendering, Vue-CLI and optional JSX support. It is one the fastest emerging frameworks till date and is a preferable choice for quick cross-platform solutions.
Backbone.js
Backbone is amongst some of the most popular web development frameworks for JavaScript developers, and partly for two reasons — it’s easy to understand usability modules, as well as the very straightforward learning curve. Backbone creates single-page applications using the most traditional web development libraries. It is built with the idea in mind that all server-side functions should flow through an API, minimizing the amount of code that needs to be composed in order to achieve the same complex functionality of more sophisticated web frameworks.
Ember.js
Introduced in 2011 this open-source JavaScript framework was declared as the best JavaScript framework for web application development in 2015. Its closest competitors are Angular and React. Ember could be a good solution for a startup or for a business looking to build complex web apps. It has a huge online community, regular updates and wide application of JavaScript that is meant to offer an engaging user experience. The framework is widely accepted for creating feature-rich web applications. The most common websites that have been designed using the framework are LinkedIn, Kickstarter, Blue Apron, and many others.
Aurelia.js
Being a self-proclaimed web development framework, Aurelia makes the process of site development a creative process. Designed with the latest JS standard, ES6, Aurelia has the ability to function on all modern browsers. Designed on a module-like framework, Aurelia has various small and huge libraries that can be used either in combination or individually, depending upon the kind of application being designed.
Meteor.js
With a variety of features for backend, frontend development and database management, Meteor rank as the most popular JavaScript frameworks. Since its inception in the year 2012, this framework has grown in terms of performance, UI design and so on. MeteorJS covers all the phases of software development cycle and takes care of such glooming processes as linking, files concatenation and others. It is of current usage in real-time application development for business companies like Mazda, IKEA, Honeywell and many others.
Polymer
Polymer is another JavaScript framework from Google. With its material web design and modern outlook, Polymer is one stupefying JavaScript framework that comes with the ability to create and reuse web components. It is featured with Polymer App Toolbox that allows you to create and deliver cutting-edge progressive web applications. The framework is fully interoperable, built for speed and offers support on all modern day browsers.
Socket
Socket’s gained a lots of momentum in the real-time developer community. With Socket you can enjoy a fully functional real-time communication between the client and the server. Socket is divided into two different parts — the first part is a client-library that runs from the browser, whereas the server-library is built on top of Node.js. Both libraries share a very similar API, and Socket is also event driven; much like Node.js is. With Socket you can implement real-time streaming of binary, instant messaging platforms, interactive document collaboration, real-time stats for your apps and projects (analytics), and so much more.
That’s not mean Vanilla JS is bad, All JS frameworks based on Vanilla JS but handle with architecture to be more faster than your architecture but if you can build big project with high performance based on fast architure so go on and don’t use frameworks.
So What can JavaScript Really do in (functionality apps)?
- Fast and Responsive
Performance matters. The fastest car. The most powerful blender. The fastest search results. In all things, we want to have the best, fastest experience, especially in software.
With JavaScript development, speed is the name of the game.
One of the key bottlenecks in modern web development is network latency. The time it takes to make a request to the server and get the results can account for a huge portion of page load time, and with hit-and-miss mobile internet, the problem is magnified. Every byte that travels from server to browser matters. If your application can do more with fewer bytes from the server, it will feel faster to users.
With JavaScript development, this is achieved by sending JSON (or sometimes XML) data to the client instead of sending a mix of data and markup HTML. All HTML rendering happens in the browser, keeping communication with the server fast and to a minimum. Just observe how fast the Kendo UI grid can be using this approach to display data from a remote JSON data service.
JavaScript development also means that changes in the UI (that do not impact the data) can be done without additional communication with the server. For example, the Kendo UI chart can be changed from bar to line with no need to talk to the server. The application can now be immediately responsive to user input.
2. Universal Front-End Platform
PHP. Ruby. Python. Rails. ASP.NET. Java. No matter which technology you use on the server, JavaScript and HTML5 can be used to provide a rich front-end. Not only does this make your front-end development more reusable and insulated against a changing server landscape, but it also lets you optimize server-side code for “backend” tasks.
For example, ASP.NET may make certain front-end tasks “drag-and-drop easy,” but it may not be the best platform for raw service performance (too much overhead). Maybe a lightweight NodeJS server would be a better simple, fast service provider.
With a JavaScript/HTML5 front-end, you can test server-side performance and pick the best platform for the task. As long as JSON gets to the browser, your front-end is covered.
3. Tablets, Phones, and Devices
Plugins will not power the next generation of rich mobile experiences. There are just too many devices and platforms for the plug-ins to ever achieve the necessary uniform distribution to be viable.
The same could be said for “native” apps. Businesses will tire of rebuilding an app 3 to 5 times just to make it accessible on devices. It’s a necessary evil of today’s phones and tablets (largely due to the app store distribution model), but there is growing momentum that suggests HTML5 could become the new “standard” in “native” app experiences, too.
And with supporting technologies like SVG, Canvas, and WebGL, standards-based development stands poised to have the power to do anything a plug-in or native app can do, with all of the reach a plug-in can never have and all of the convenience native apps can never offer.
Sure, you can use server-side runtimes to produce HTML5 to target these platforms, but can you package the server-produced HTML and “install” it on a mobile device? Probably not. That’s why adopting the JavaScript model is a must, and it leads to advantage numero quatro (number four).
4. Offline Support and App Stores
This is one of the most significant reasons to pick JavaScript/HTML5 development versus traditional server-side development.
For “web development” to replace the “desktop” platforms that have come before, it must provide experiences that work all the time, with and without active connections to the Internet. To use the classic scenario, the apps must work on a plane ride (and not some fancy plane with WiFi).
Server-side development has the crippling requirement to talk to the server after most user interactions. The moment you take the server away, the site or app is a paperweight.
With JavaScript/HTML5 development, apps can be usable and responsive, even in the absence of an active Internet connection. JavaScript front-ends, like those built with Kendo UI, can use locally cached data to draw and refresh the app until network connectivity is restored. And something like the Kendo UI DataSource will eventually help track changes to objects locally and persist those changes to the server later.
This is perfect for mobile app packaging, too. With a UI that can load and run on a device with or without a connection to the Internet, a JavaScript/HTML5 powered app can become indistinguishable from a “native” app. Server-side front-end development can’t get you there, but a JavaScript front-end can.
5. Industry Momentum
Finally, while not the best benefit of JavaScript development, the industry momentum behind JavaScript/HTML5 should be considered. JavaScript is the world’s most popular programming language. Google, Apple, and Microsoft have all thrown significant muscle and money behind this universal approach to development. And new tools, frameworks, and money making opportunities are emerging at a rapid pace for JavaScript developers.