Altabel Group's Blog

Posts Tagged ‘JavaScript

JavaScript is the most accessible cross-platform language nowadays. It’s used both on front-end and back-end website development.

Using it Altabel developers create web-apps which includes offline mode, desktop apps, apps for smartphones and tablets, add-ins for Microsoft Office, SharePoint and Dynamics. And if you don’t get acquainted with JavaScript yet we strongly believe that you should do it immediately!

I reckon many of us know there are plenty of different languages compiled in JavaScript. It’s CoffeeScript, Dart, GorillaScript and others. To be fair some of these languages are fly-by-night creations that have never really taken off in the wild. But many of these languages are major engineering efforts with large ecosystems and large corporate backers. With so many frameworks and languages out there it can be difficult to figure out which one is the best.

In 2012 Microsoft analyzed the situation and created a new language with a possibility of dealing with problems and using existing JavaScript insights. Thus, a free open source programming language TypeScript was developed and maintained by Anders Hejlsberg (co-creator of Turbo Pascal, Delphi and C#). From the very beginning the new language started expanding rather quickly due to its flexibility and productivity. Considerable amount of projects written in JavaScript began to transfer to TypeScript. Popularity and relevancy of the new language leaded to the fact that lots of TypeScript ideas became the part of new JavaScripts standard afterwards. And moving forward the AngularJS 2.0 version (today one of the most popular web frameworks) was completely written on TypeScript with the help of Microsoft and Google.

But why TypeScript?

Let’s review main reasons of its popularity:

  • TypeScript is a typed superset of JavaScript. In other words any valid JavaScript code is also valid for TypeScript.
  • TypeScript may be used to develop JavaScript applications for client-side or server-side execution.

Microsoft’s TypeScript seems to generate the most attractive code and is considered to be one of the best JavaScript front-ends. TypeScript adds sweetness, but at a price.

  • TypeScript can also be used with existing JavaScript frameworks/libraries such as Angular, jQuery, and others and can even catch type issues and provide enhanced code help as you build your apps.
  • TypeScript can be just the right fit for projects in which developers try to remain relevant without the need to learn a whole new syntax.

The ubiquity of JavaScript as a runtime has inspired people from a variety of programming backgrounds to recreate JavaScript as they see fit. And yes, TypeScript lets you write JavaScript the way you really want to.

  • TypeScript differs from JavaScript with possibility of evident static objectives, with usage maintenance of full-blown classes (just as in traditional object-oriented languages), and also with maintenance of logging on modules. It’s aimed at development speed raising, simplifying of legibility, refactoring and reusability of your code.
  • TypeScript has many additional language features but defining types and creating classes, modules, and interfaces are some of the key features it offers.
  • In TypeScript the same types are supported as well you would expect it in JavaScript. Types enable TypeScript developers to use highly-productive development tools and practices: static checking, symbol-based navigation, statement completion and code refactoring.
  • TypeScript implements many conceptions that are appropriate to object-oriented languages such as extending, polymorphism, encapsulation, accessibility modifiers and so on.
  • Lots of TypeScript features have strict rules, so various code formatting errors are excluded. Which means that the possibility of incorrect implementation or inaccurate method invocations is eliminated.
  • TypeScript potentially allows writing large complex programs more quickly. Thereafter it’s easier to maintain, develop, adjust to scale and test them in comparison with standard JavaScript.

Drawbacks

TypeScript has a number of other positive features that are out of the scope of this article. On the other hand, there are two significant minuses exist.

  • Probably, the biggest minus is entry threshold and number of specialists on the market. Nowadays there are not so many specialists with solid experience in this language.
  • In comparison with JavaScript, it’s needed more time for the development. It stems from the fact that apart from class implementation one should describe all enabled interfaces and method signatures.

TypeScript 2.0

There are some significant changes coming in TypeScript 2.0 that continue to deliver on the promise of making JavaScript scale. This includes a whole rewrite of the way types are analysed in the flow of the code and an opt-in feature that starts to deal with logic errors around the flexibility of things being undefined or null in JavaScript. Other features planned for TypeScript 2.0 include read-only properties and async/await downlevel support.

TypeScript creator Anders Hejlsberg already has plans for TypeScript 2.1 and beyond. Features envisioned for these releases include a new JavaScript language service in Microsoft’s Visual Studio software development platform and more refactoring support.

The most recent version, TypeScript 1.8, rolled out in February, includes several more features like F-Bounded polymorphism, string literal types, etc.

Conclusion

So, if you haven’t taken a look at TypeScript, I have hopefully convinced you that it is something to at least worth a bit of your time. It has some of the best minds focused on making JavaScript scale and the team is going about it in a way that is open and transparent. By embracing the reality of JavaScript and building on top of it, in my opinion TypeScript is transforming the common language of the web, for the better.

We will be happy to hear how you use TypeScript in your current projects, if you like it, if you are planning to switch to this language, what are the pros and cons in your opinion, etc. Feel free to share with your thoughts in comments below!

 

Victoria Sazonchik

Victoria Sazonchik

Business Development Manager | LI Profile

E-mail: victoria.sazonchik@altabel.com
Skype: victoria_sazonchik
www.altabel.com

 

“Computer programming is an art, because it applies accumulated knowledge to the world, because it requires skill and ingenuity, and especially because it produces objects of beauty.”
Donald Knuth, 1974

 

It’s better to start your journey into the career of programming by answering the question “Do you really need programming?” This question does not apply to those, who majored in computer programming or was close to it. If at school you were good at math, if you like to spend a lot of time sitting in front of the computer, if you want to learn something new, then programming is for you. What is more, this area is now in demand and highly paid in the world, job vacancies for the post of programmers are always open. Isn’t it the best time to be a programmer?:)

Everyone knows that the future programmer should be able to think broadly and to present the project from different perspectives before its implementation and realization. Unfortunately, the machine does not understand a human language. Of course, I’m not talking about Siri and other voice recognition — I’m talking about the creation of new software. To create the calculator, the computer needs to be given the task in the same way as the foreman explains to workers how to lay bricks. That’s why you can’t do anything without understanding the programming languages. Well, first you need to decide what kind of programming languages we should start with.

And here everyone chooses a language which will be useful for him. It depends on the kind of products you are going to develop. Most of us studied Turbo Pascal at school, and it’s no news that this language is practically not used anymore. So, if you want to join the team of programmers in the nearest future, the choice of language should be made sensibly.

Among the most popular programming languages in 2016 are Java, followed by C languages, then Python, JavaScript, PHP, Ruby, etc. It should come as no surprise that the more popular language is, the more chances you have to find work in the future. So, you’d better start with Java or C#, as these are the best paid and relatively simple learning languages of writing code. If you can’t cope with them, then you should try to learn Python. This language suits for quick and effective programming.

But if you have no programming experience at all you can start with something more simple for understanding. Good examples can be the basics of HTML and CSS.

Why? These two languages are essential for creating static web pages. HTML (Hypertext Markup Language) structures all the text, links, and other content you see on a website. CSS is the language that makes a web page look the way it does—color, layout, and other visuals we call style. Well, if you are interested in making websites, you should definitely start with HTML and CSS.

Let’s move to JavaScript. It is the first full programming language for many people. Why? It is the next logical step after learning HTML and CSS. JavaScript provides the behavior portion of a website. For example, when you see that a form field indicates an error, that’s probably JavaScript at work.

JavaScript has become increasingly popular, and it now lives outside web browsers as well. Learning JavaScript will put you in a good place as it becomes a more general-purpose language.

Some people also suggest choosing Python as the first programming language because Python’s program code is readable, first of all. You don’t even need to be a programmer to understand what is happening in the program. Due to the simple syntax of Python you will need less time for writing programs than in Java, for example. A huge base of libraries will save you a lot of strength, nerves and time. Large technology companies are working with Python: Yandex, Google, Facebook and YouTube. It is used for web applications, game development, software for servers.

Java can also be a good choice for a beginner. This language is more popular than Python, but a bit more complicated. At the same time, the development tools are much better designed. Java is one of the most popular languages for the backend development of modern enterprise web applications. It is used in Amazon, eBay, LinkedIn and Yahoo! With Java and the frameworks based on it, developers can create scaling web apps for a wide range of users. Java is also the primary language used for developing Android applications for smart phones and tablets. Moreover, after Java you will be able to work with low level programming languages.

PHP is one more popular language. The PHP language, along with databases (e.g. MySQL) is an important tool for creating modern web applications. Most of the sites developed on PHP are focused on a large amount of data. It is also a fundamental technology of powerful content management systems like WordPress. There are no normal imports in PHP, there are many solutions to one and the same problem. And it makes training more complicated.

 

 
The languages C and C# are a bit complicated for a beginner. But if you develop software for embedded systems, work with system kernels or just want to squeeze out every last drop from all available resources, C is what you need.

Ruby has begun to gain popularity since 2003, when the framework Rails appeared. Used widely among web startups and big companies alike, Ruby and Rails jobs are pretty easy to come by. Ruby and Rails make it easy to transform an idea into a working application, and they have been used to bring us Twitter, GitHub, and Treehouse.

Choosing a programming language may still seem challenging. It shouldn’t. You can’t go wrong. As long as you choose a language that is regularly used in technology today, you’re winning. When you are starting out, the goal is to become solid in the basics, and the basics are pretty similar across almost all modern programming languages.

Part of learning to code is learning a language’s syntax (its grammatical or structural rules). A much bigger part of learning to code, the part that takes longer and gives you more headaches, is learning to solve problems like a programmer. You can learn the grammatical structure of the English language pretty quickly; however, you won’t truly understand the language until you put that grammatical structure to use in a conversation. The same is true in programming. You want to learn the core concepts in order to solve problems. Doing this in one language is similar to doing it in another. Because the core concepts are similar from language to language, I recommend sticking with whichever language you choose until your understanding of the core concepts is solid. If you have a clear idea of your reasons for learning to program, and know exactly what you want to accomplish with your new coding skills, then you’ll be able to make the right choice.

How did you guys get into programming? What are the best programming languages for first-time learners?

Please, share with us your experience and opinion here below:)

 

Kate Kviatkovskaya

Kate Kviatkovskaya

Business Development Manager | LI Profile

E-mail:Kate.Kviatkovskaya@altabel.com
Skype: kate.kviatkovskaya
www.altabel.com

Let`s start from a bit of history. React.js is a JavaScript library for building UIs. It was created by Facebook development team to deal with large applications with data that changes over time: react.js hits the “refresh” button any time data changes, and knows to only update the changed parts. Firstly, react was used in-house at Facebook and then it was released as an open-source project and it has quickly gained popularity among developers.

Facebook is not the only one to use React:

Instagram is 100% built on React, both public site and internal tools ;

Yahoo`s mail client is made in React;

Netflix – the biggest paid video-streaming service;

Sberbank, bank #1 in Russia, is built with React;

Khan Academy uses React for most new JS development.

React in comparison to Angular.js isn`t a complete framework. However we can`t say that React.js is only “V” in the MVC. After a closer look, you can actually see that React.js is more than just “V”, it has quite some features of the C (controller) part as well. This is why React is so confusing to understand.

Let`s see why React.js stands out from the crowd:

Convenient architecture

Flux – is highly competitive to MVC. One-way data flow provides maintainability and efficient arrangement of data and DOM elements.

Virtual DOM

React developers suggested using “virtual DOM” in order to solve performance issue for websites with too dynamic DOM. All changes in a document are made there first, and then React looks for the shortest path to apply them in a real DOM tree. This approach makes the framework fast.

Components

React is fundamentally different than other front-end frameworks in that each asset is made up of many isolated components. Want a button changed across the whole platform? Change it once and voilà it`s changed everywhere.

By making the creation, distribution and consumption of isolated reusable components more straightforward, developers are better able to save time by using and creating common abstractions. This is true of both low level elements like buttons and high level elements such as accordions.

JSX

React.js uses a special syntax called JSX, which allows to mix HTML with Javascript. Markup and code are composed in the same file. This means code completion gives you a hand as you type references to your component’s functions and variables.

SEO  friendly

React is significantly more SEO friendly than most JavaScript MVC frameworks. As it is based on a virtual DOM you can use it on the server without needing a headless browser on the server such as Phantom.js to render pages to search engine bots.

React.js is a new interesting emerging Javascript library. It does have some drawbacks however it`s an excellent alternative for building large apps where data changes quickly. We are curious to hear about your experience in using React.jsJ Have you tried it?

 

Anna Kozik

Anna Kozik

Business Development Manager |LI Profile

E-mail:Anna.Kozik@altabel.com 
Skype: kozik_anna
www.altabel.com

jsframework

Whether you’re building apps for the browser, mobile or desktop, Aurelia can enable you to not only create amazing UI, but do it in a way that is maintainable, testable and extensible.

Retrospective and today

Aurelia is a project of Rob Eisenberg, the author of a very popular MV * – framework for Caliburn.Micro XAML-platforms, Durandal. Understanding all the disadvantages of Durandal, Eisenberg engaged in the development of so-called NextGen framework. In 2014 he began to work in Angular team on the second version of the framework. However, several months later, Rob decided to leave the Angular team since the direction of Angular 2, in his opinion, had changed a lot. He gathered a large team and returned to work on the framework of his dreams. And Aurelia is the result of that work.

JavaScript of tomorrow?

By using modern tooling Aurelia was written from the ground up in ECMAScript 2016. This means you have native modules, classes, decorators and more at disposal.
Aurelia is written in modern and future JavaScript, it takes a nowadays approach to architecture. It’s built as a series of collaborating libraries, which form a powerful and robust framework for building Single Page Apps (SPAs). However, Aurelia’s libraries can often be used individually, in traditional web sites or even on the server-side through technologies like NodeJS.
Aurelia’s code is open sourced under the MIT License, a very permissive license used by many popular web projects today. The starter kits are available under the Creative Commons 0 license. There is also a Contributor for those who wish to join the team in working on Aurelia. Ultimately, this means that you can use Aurelia without fear of legal repercussions and it can be build in the same confidence.

Benefits of Aurelia

Clean and Unobtrusive – Aurelia is the only framework that lets you build components with plain JavaScript. It stays out of your way so your code remains clean and easy to evolve over time.

Convention over Configuration – Simple conventions help developers follow solid patterns and reduce the amount of code they have to write and maintain. It also means less fiddling with framework APIs and more focus on their app.

Simple, But Not Simplistic – Because of the simple design developers are able to learn a very small set of patterns and APIs that unlock limitless possibilities.

Promotes the “-ilities” – Testability, maintainability, extensibility, learnability, etc.- Aurelia’s design helps developers to naturally write code that exhibits these desirable characteristics.

Amazingly Extensible – Aurelia is highly modular and designed to be customized easily, so developers will never hit a roadblock or have to “hack” the framework to succeed.

Web Standards Focused – Focused on next generation JavaScript and Web Components, and avoiding unnecessary abstractions that obscure the underlying web, Aurelia is the cleanest and most standards-compliant framework today.

Integrates Well with Others – Easily integrated with any 3rd party library or framework: for instance, with jQuery, React, Polymer, Bootstrap, MaterializeCSS and much more.

TypeScript Support – Each Aurelia library is released with its own d.ts files. There are also official TypeScript beginner kits and production quality starter kits.

An Official Product with Commercial Support – Being an official product of Durandal Inc., it has commercial and enterprise support available, so you can use Aurelia for building core technology for your business.

Thriving Community and Ecosystem – Having one of the largest developer gitter channels in the JavaScript world, oodles of contributors and a huge core team, Aurelia has been used to build just about every type of application and is used by large, well-known multi-national companies and enterprises.
 
Aurelia, Angular and React.js – what’s common and what’s different?
 

Aurelia vs. Angular

Similarities between Aurelia and Angular 2:

  • Aurelia offers ES6-support out of the box and supports all forms of alternative abstraction syntax such as TypeScript and CoffeeScript. Migration documentation about migrating from Angular 1 and 2 have been put on the roadmap.
  • The basis of both Angular 2 and Aurelia application comprise components associated with the corresponding template.
  • Differences in vision details and options range:

  • The syntax is much simpler and more explicit (i.e. self-explanatory) than Angular 2 and looks a lot like standard JS syntax. ES6 and JSPM are used by default and a gulp file with a custom-built system to transpile ES6 to ES5 using the Babel transpiler is included in the standard package.
  • Aurelia also uses conventions instead of its own syntax and boilerplate code. No special characters like the ones in Angular 2 (*, (), [] en #) here.
  • Aurelia is built in a modular way making it very pluggable. You can plug in internationalization, routing, virtualization, animation, … Besides that, third party plugins are available as well such as the aurelia-flux plugin adding the Flux dispatcher to Aurelia.
  • The presence of a root-component is necessary; it represents an application (app). The metadata may / should be attached to components by using decorators. Component initialization is performed by using dependency injection. In addition, each component has a declared lifecycle, which can be built by using the lifecycle hooks. The components may be formulated into a hierarchical structure.
  • Communication between the component and the template is performed by using data binding. The process of template rendering to the final HTML can be integrated by using pipes (Angular) or value converters + binding behaviours (Aurelia).
  • The main advantage of Aurelia in comparison to Angular is an advanced composition mechanism and template parts. Aurelia is designed with an emphasis on unobtrusive, the number of framework structures in the final code is minimal. Aurelia is more compact, while Angular sometimes simply forces to produce copy-paste.
  • Aurelia is new to the market while Angular has a big user base because it’s already been around for 6 years. On the other hand, Aurelia has great documentation available, it’s an official product of Durandal Inc, and the company has a long term vision for the product, something the Angular team doesn’t seem to have and is blamed for a lot.

Aurelia vs. React.js

  • While on the surface it might not seem fair to compare Aurelia to React.js, they’re both being used for the same things. Despite the fact that React.js is a fully-fledged and functionally released product without the early preview alpha tag and Aurelia is not, at current stage they are both pretty at the same level. You can achieve the same tasks within both, just in different ways.
  • As for React components and Aurelia’s ViewModel’s, they are both quite similar in that you’re essentially using a class to define properties and methods bound to a particular view. The primary difference between them is React doesn’t separate the logic from the view, meaning in React the View and ViewModel are both within the same file.
  • However, that’s not to say that Aurelia doesn’t allow you to achieve the same thing by rendering the View from within the ViewModel as well and forgoing a traditional View.
  • The original intent behind React.js was not to be a competitor to the likes of Angular or Aurelia, but rather be the library that everyone uses with their SPA framework like Angular to improve performance.
  • Therefore, this means you can easily use React.js within Aurelia. Aurelia and React.js can be used together and in doing so, it provides you with a level of power other frameworks cannot without subsequent complexity and strict convention like EmberJS.

Aurelia vs. Angular and React

  • Two-way binding is provided out of the box and the framework does so very precisely. By default, 1-way databinding is used except for form controls, a clear plus when compared to React. Do keep in mind that two-way data binding can only be done through explicit syntax, as is the case in Angular 2.
  • The learning curve for Aurelia is comparable to that of Angular 2 and thus a lot steeper than React’s. Luckily, the extensive documentation makes up for that a great deal.
  • Angular 2 and Aurelia Architecture is very similar. Aurelia looks a lot like Angular 2 in the sense that it’s a complete framework that relies on the web standards. It’s as pluggable as React is and as Angular 2 will be.
  • While Angular was created by Google and React by Facebook, they don’t provide commercial or enterprise support, something that Aurelia will do.

 
Conclusion

It goes without saying why these three frameworks are so popular. They all have a lot of strong advantages. Eventually, I’m favoring Aurelia: there’s solid documentation available and the overall philosophy is the same with Angular 2, but Aurelia is a better choice from the syntax and execution point of view. The architecture and syntax vision of Aurelia team seems to be more clear than the vision of the Angular team. The company and enterprise support of Aurelia is also a big pro.
What is your personal experience with these frameworks? Which one would you choose for your projects and why? What’s your prediction “who” will win the crown in the nearest future? Please feel free to share your thoughts with us.

Thank you in advance!

 

Darya

Darya Bertosh
darya.bertosh@altabel.com
Skype ID: darya.bertosh
Business Development Manager (LI page)
Altabel Group – Professional Software Development

node.js

Node.js is an open source runtime environment which is based on Google’s V8 JavaScript engine. Many companies and frameworks had attempted to run JavaScript on the server, but Node.js was the first runtime which was good at doing it at scale.

Node.js was first written in 2009, and since then its popularity has risen immensely. The list of companies using Node.js is big enough and includes such as IBM, LinkedIn, Microsoft, PayPal, and Yahoo!. Here is the link with projects, applications, and companies using node.js https://github.com/nodejs/node-v0.x-archive/wiki/Projects,-Applications,-and-Companies-Using-Node

The node.js package manager npm became the biggest package manager in the software world in 2014, and now has almost twice as many modules as similar package managers from Java and Ruby.

Benefits

JavaScript is everywhere on the web

JavaScript won a number of browser-side languages and technologies to become the “language of the web”. Now JavaScript is on the server-side, in databases, in the internet of things, robotics and more.

Performance

There are two fundamental reasons why Node.js is quick. To begin with, it uses the Chrome V8 JavaScript engine. Second is the event loop. Node.js performs I/O non-blocking and asynchronously. As opposed to blocking parallel threads, a task is sent to the event loop with a callback and proceeds with execution. Once it finishes the async task, the callback is invoked. This approach uses less memory and it is usually simpler to program. It is likewise especially quick for I/O operations.

Npm

Npm is the package manager for Node.js and is one of the reasons for the popularity and growth of Node.js. Npm makes adding libraries and third party modules very easy, handling all of the dependencies for you. Moreover, there are about 225k modules in npm with 2.5B downloads per month.

Tools

Node.js projects range from small and simple libraries to fully blown applications. You can not only run your entire back-end on Node.js but also you can run other aspects of your engineering operations and online presence with Node.js based software. There are basic libraries like Lodash for various utility functions or Async to help with control flow in your asynchronous code. There are drivers for working with all the SQL and NOSQL databases. There are web frameworks like Express or HapiJS. There are two popular tools for build/task runners, Grunt and Gulp. For testing, there are a few great frameworks such as Mocha, Jasmine, and Lab, which includes code coverage. A great tool for managing your Node.js processes is PM2. You can run a message broker with MQTT using Mosca. If you need a continuous integration/delivery server, then there is StriderCD. You can even use HarpJS for static website generation, Ghost for blogging, and NodeBB for community forums.

A large active community

The size and usage of npm makes it clear about the size of the Node.js community. There are various resources to learn Node.js together with approximately 105k questions on StackOverfow. Most Node.js project owners are quite responsive. There are a number of blogs posts, books, open source modules, active IRC channels, several Meetup groups, conferences, and even a few consulting firms dedicated to Node.js.

When to use Node.js

Node.js is built on great non-blocking event driven architecture model. In case your project or module can really make advantage for this model, then go for it. Some of the cases could be the following:

  • Single page applications (web applications in AJAX, mobile web applications)Node.js has ability to process many requests with low response times needed. It is also able to share things like validations between client and server side, which makes it a good choice for modern web applications doing a lot of processing on client side.
  • Real time web applications:Anything that requires real-time feedback from web server such as chat application, messaging applications or other collaboration tools is good with Node.js. It will be the best technology for this type of job. Ruby and Python can do these kind of features however Node.js will do it exceptionally great in terms of performance and simplicity of development.
  • Streaming Data:In case your plan is to build streaming applications then Node.js is what you need. Traditional web technologies frequently treat http requests and responses as atomic events. However, they are streams and not events. And consequently many great Node.js applications can be built to take advantage of this fact.
  • Building APIs:Mobile applications can benefit most out of it because they consume data mostly via web services in form of JSON APIs. It’s as well perfect for taking care of many requests that are I/O driven (e.g. operations on database) and scales nicely.

When not to use Node.js:

    • Heavy CPU utilizing applications:It’s not good using Node.js for applications that are very heavy on CPU usage and very light on actual I/O. Node.js permits to easily write C++ add-ons, so you could certainly use it as a scripting engine on top of your algorithms.
    • Enterprise applications:If you’d like to build an enterprise application which requires complex operations, it’s better to stick to proven technologies like JAVA, Python. Node.js still has a long way to go and is considered to be rather young technology and yet to prove itself.
    • Simple CRUD/HTML apps:While Node.js will eventually be a tool for writing all kinds of web applications, however your application won’t mystically get more traffic just because you write it in Node.js. If large part of your application is basically rendering HTML based on some database, using Node.js will not provide a lot of business benefits yet.

Some suppose that Node.js has a big future ahead and its popularity will be rising. Do you agree with this? Which future do you predict for it? I’ll be glad to hear your thoughts in the comments below:)
 

Yuliya Tolkach

Yuliya Tolkach
Yulia.Tolkach@altabel.com
Skype ID: yuliya_tolkach
Business Development Manager (LI page)
Altabel Group – Professional Software Development

What is it?

Web Graphics Library (WebGL) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins.

It is integrated completely into all the web standards of the browser allowing Graphics Processing Unit (GPU) accelerated usage of physics and image processing and effects as part of the web page canvas. Its elements can be mixed with other HTML elements and put together with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer’s GPU.

Developers often use it for games, but it is finally gaining visibility across the web. It is now being used for map visualizations, charting data and presentations.

Some history behind

WebGL emerged of the Canvas 3D experiments started by Vladimir Vukićević at Mozilla. He first demonstrated a Canvas 3D prototype in 2006. By the end of 2007, both Mozilla and Opera had made their own separate implementations. In early 2009, the non-profit technology consortium Khronos Group started the WebGL Working Group, with initial participation from Apple, Google, Mozilla, Opera, and others. Version 1.0 of the WebGL specification was released March 2011. Early applications of WebGL include Zygote Body. In November 2012 Autodesk announced that they ported most of their applications to the cloud running on local WebGL clients. These applications included Fusion 360 and AutoCAD 360. Development of the WebGL 2 specification started in 2013. This specification is based on OpenGL ES 3.0.

What is WebGL Doing?

WebGL has three distinct advantages over writing code that simply manipulates the DOM:

  • Tasks. Drawing reflective materials or complex lighting is rather tough. With JavaScript you could offload some of that to the GPU in your device and have that do the heavy lifting.
  • Performance. Using hardware acceleration (with GPU being built into your device), WebGL is a great fit for games as well as complex visualizations.
  • Shaders. Complex visual effects can be done with small programs – “shaders”. This may be very simple things (such as producing a sepia coloring effect), or more complex simulations (such as water or flames).

How to start?

Here are the essentials steps to create your first WebGL project:
1. Create “canvas” element
2. Obtain drawing context
3. Initialize viewport
4. Create buffers
5. Create matrices
6. Create shaders
7. Initialize shaders
8. Draw primitives

This could sound like a lot of work, so please have a look at some of the engines and frameworks that could be of help.

Engines and Frameworks

PlayCanvas
It is an open source engine which includes a number of options, along with an editor which helps visualize your changes as you make them. Some useful experiences they highlight include brand experiences for viewing high performance cars, as well as playable ads which you can insert into applications.

Turbulenz
It offers a 2D and 3D engine for developers to build, publish, and monetize games on their platform. Founded by former developers at Electronic Arts, this tool is also open source under the MIT License. You could download and build the latest Turbulenz Engine directly from the Github public repository. This includes everything from rendering effects and particles, to physics, animations, audio, inputs, and networking.

BabylonJS
Babylon is a complete JavaScript framework for building 3D games with HTML5, WebGL and Web Audio. It is an open source and free framework created by several people at Microsoft. It is updated on nearly a daily basis, and even offers a sandbox to play in and test out your code.

Pixi.js
It is a devoted rendering engine. There are a host of other engines covering game, sound and physics etc. and they all work beautifully with Pixi. It also has a number of added benefits including render auto-detect to fallback to Canvas when necessary, text support via bitmap (sprites) or webfont, as well as an asset loader.

Construct 2
It is a powerful ground breaking HTML5 game creator designed specifically for 2D games. It allows anyone to build games as no coding is required.

Phaser.io
It is also open source and besides, it offers TypeScript support, which is a strongly typed version of JavaScript. It also has some in-depth guides, and a showcase of Phaser made games.

Three.js
Three.js is a cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser. It is one of the more popular frameworks including everything you need to get running: renders, scenes, cameras, animations, lights. While this is fantastic for most things, it is lacking a physics engine, which will come in handy when creating a game. Three.js is made available under theMIT license. It even has an editor (beta) that you can play around in. The source code is hosted in a repository on GitHub.

PhiloGL
PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development from Sencha Labs people. All lessons from Learning WebGL have been ported into the PhiloGL Framework. This is a great starting point for people wanting to learn PhiloGL and/or WebGL as well. This is also licensed under the MIT License.

Where else is WebGL used?

WebGL has not only been used in 3D web design and gaming, but also by some researchers for scientific purposes. For example, in a book named “Cellular Automata” the authors have used this technology to simulate Debris flow for the article “Visualization of molecular structures using state-of-the-art techniques in WebGL” tried to simulate molecules with it. More basic examples like simulation of the solar system are made many times by developers.

NASA developed an interactive web application called Experience Curiosity to celebrate the 3rd anniversary of the Curiosity rover landing on Mars. This Blend4Web-based app makes it possible to operate the rover, control its cameras and the robotic arm and reproduces some of the prominent events of the Mars Science Laboratory mission. The application was presented at the beginning of the WebGL section at SIGGRAPH 2015.

Hope the information about WebGL was useful for you  Have you ever used it? If yes, how was your experience? Please feel free to share your comments and thoughts in the comments below.

 

Yuliya Tolkach

Yuliya Tolkach
Yulia.Tolkach@altabel.com
Skype ID: yuliya_tolkach
Business Development Manager (LI page)
Altabel Group – Professional Software Development

js

JavaScript is celebrating 20th anniversary in 2015. It’s a language with a changeable history and carries a lot of baggage from its childhood, but as it leaves its teenage years behind it, now it’s a language that has finally grown up. JavaScript made a revolution in web by allowing scripts to run in a browser. But after its initial popularity soon the reputation was spoiled and JS was often associated with poorly written, cut-and-pasted code that was used to create annoying pop-ups and cheesy ‘effects’. Thus we see that JavaScript had some annoying weaknesses as a programming language.

On the other hand, we can observe that JavaScript has “ubiquity” that other programming languages don’t have. One must admit that you just need a browser to run, which means that anyone with a smartphone or computer is capable of running a JavaScript application. JavaScript has made the dream true that Java was available on all platforms by using the browser as its virtual machine. And now thanks to Node.js, it can run without a browser.

It is well known fact that simple text editor – is all you need to write a program in JS. JavaScript has a low barrier to entry when it comes to development. And we also must agree with GitHub that JavaScript is one of the most popular languages. This means that help is often easy to come by and there is a lot of JavaScript code out there. Furthermore, one should not forget that it also means that code’ libraries are well tested and many issues have already been solved.

After a first decade, which was a period of awkward childhood, JavaScript was growing up like most of the teenagers. People changed their mind with the revolutionary advent of Ajax. jQuery then made people using JavaScript to build some new applications and Node has taken it all to a whole serious level. JavaScript established itself as a powerful and flexible language with some cool features such as:
– Prototype-based Inheritance
– Closures
– JSON (subset of the object literal notation of JavaScript)
– Asynchronous event-driven programming
– Functions as objects

Frameworks and Libraries

Lots of frameworks and libraries have been written to mitigate problems and improve JavaScript for programming. JavaScript framework is the set of pre-written JavaScript code that helps to ease development of the JS based applications. This framework is also known as JavaScript libraries, which enhance the use of this programming language in many ways.
We have already shared some posts about the JavaScript frameworks in the past. JavaScript framework can be found anywhere on the web with different type of working capabilities. We have selected few of them to keep an eye on, and we hope you will find our compilation useful.

1) Angular.js

Open-source web application framework. It aims to simplify both the development and the testing of such applications by providing a framework for client-sidemodel–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

2) Ember.js

Open-source JavaScript application framework, based on the model-view-controller (MVC) pattern. It allows developers to create scalable single-page web applications by incorporating common idioms and best practices into the framework.

3) Meteor (MeteorJS)

Open-source JavaScript web application framework written using Node.js. Meteor allows for rapid prototyping and produces cross-platform (web, Android, iOS) code. It integrates with MongoDB and uses the Distributed Data Protocol and a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code. On the client, Meteor depends on jQuery and can be used with any JavaScript UI widget library.

4) Backbone.js

JavaScript library with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm. Backbone is known for being lightweight, as its only dependency is on one JavaScript library, Underscore.js. It is designed for developing single-page web applications, and for keeping various parts of web applications (e.g. multiple clients and the server) synchronized. Backbone was created by Jeremy Ashkenas, who is also known for CoffeeScript.

5) Knockout.js

JavaScript implementation of the Model-View-ViewModel pattern with templates. Main principles are: a clear separation between domain data, view components and data to be displayed; the presence of a clearly defined layer of specialized code to manage the relationships between the view components. These features streamline and simplify the specification of complex relationships between view components, which in turn make the display more responsive and the user experience richer.

6) Ext JS (Sencha Ext JS)

JavaScript application for building interactive cross platform web applications using techniques such as Ajax, DHTML and DOM scripting. Ext JS includes interoperability with jQuery andPrototype.

7) D3.js (D3)

JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards. It is the successor to the earlier Protovis framework. In contrast to many other libraries, D3.js allows great control over the final visual result.

Conclusion

JavaScript will be one of the most important languages to learn and invest into over the next few years. Website development is into a single-page web application that relies on JavaScript to do the heavy lifting on the client side (in this case, usually JS goes with modern front-end frameworks such as Backbone or Angular.js). The advantage of using Isomorphic JavaScript is increasing the popularity of JS. The data that is transported from databases is often stored in JSON format. The possibility of using a combination of HTML, CSS and JavaScript let you build an application for iOS, Android and FireFox OS. JavaScript has existing libraries, plugins, APIs and other cool stuff to be broad used in The Internet of Things (IoT). JavaScript is becoming the language not just for the front and back end of web development, but also for interacting with a huge number of modern devices.

To sum up, I must admit that now is the perfect time to get started with JavaScript projects, as it moves into its 20s, and has finally grown up for starting to go places!
What are your opinions about JavaScript future, its libraries and frameworks? I’d love to hear your thoughts in the comments.

 

11d78a3

Svetlana Pozdnyakova
svetlana.pozdnyakova@altabel.com 
Skype ID: Svetlana.pozdnyakova
Business Development Manager (LI page)
Altabel Group – Professional Software Development

 


%d bloggers like this: