Here i tried to gather most of those technologies and technical terms together with their definitions, missions and relations to each other.
EcmaScript is not a programming language. It is a standard, a declaration or a specification that covers how an EcmaScript implementation should be designed. You can find that standard here. For a more detailed explanation on EcmaScript see the article i mentioned above.
Things are getting weird at this point. Because it is more appropriate if we name this as an implementation instead of a language. How?
- Google’s V8 Engine used in Google Chrome
- Mozilla’s SpiderMonkey Engine used mainly in Firefox
- Microsoft’s Chakra Engine used in Microsoft Edge
The Standard forces the vendors mostly on the way of how features should be implemented. So, it does NOT say:
Hey! You have to implement every single feature that we specified here.Well, this is totally fair and understandable. After all, it is just a specification. Not a constitution. At this point, We are facing a new problem: Compatibility.
Let’s create another example scenario:
ECMA Organisation released a new version of EcmaScript. And in that version there is a new feature, let’s call it Feature X . This is a completely new feature and brings some big improvements to the language. You are super excited about this. You want to use it immediately in your next project.But guess what? There is no guarantee that all those browsers will implement this Feature X in their next release. No. Not at all.
Rich offline experiences, periodic background syncs, push notifications — functionality that would normally require a native application — are coming to the web. Service workers provide the technical foundation that all these features rely on.Service Workers API first announced in 2015. It’s been around for almost 4 years. Yet, Apple still didn’t implement it to the Safari (They recently announced it in Safari Technology Preview). Yes, you created an application enriched with service workers. Well, your application wouldn’t work as expected in Safari browsers.
In the context of this example, Babel has **NO** solution for service workers compatibility. This feature is mostly (not completely) related to the browser itself instead of the language syntax.
Back in 2009, Ryan Dahl, a Google Engineer, came up with an idea:
Ok, what is a module bundler and why we need it? Let’s continue with an example scenario:
We are building a web application consists of several components and pages. And we are using different helper libraries and third-party components across our application. We,
want to use SASS for our styles,
want to minify / uglify our code,
don’t want to deal dozens of imports and references
want to integrate Babel to use latest EcmaScript features
want all of them with minimum effort and configuration. This is exactly what webpack does. You can achieve all of above or even more with just one single configuration file. It can transform your code and dependencies and generate single bundled file that contains everything needed to your application works:
bundle.min.css That’s it. Just import those two files in your base html file and we are good to go.
Of course this is a very basic example. You can do much more with webpack. But i hope this gives you some base knowledge about webpack and other module bundlers outside. And yes, there are plenty of them. Here some:
First official definition:
Thanks to Node JS, we had the chance to create server-side applications with JS. With Electron, we take this a step further: Writing desktop applications in JS.
And yes, it is cross-platform. Single code base. Write your application once, run it everywhere. Package your application for desired operating system. It supports Mac OS, Linux and even Windows. Although everyone moving to web, desktop applications are still preferred by many. And from developer perspective, it is so much pain to create an application for all major operating systems by writing the code in different environments. Too much development time, effort and budget. Even if you are Microsoft:
Some apps built on Electron. https://electronjs.org/This is just the warm up. Let’s move on.
You probably hear or see this word very often. What is React?
You can create complex applications without losing the control over your code. One of the greatest feature of React is component system. You can create reusable smart or dumb elements to build your application more efficiently.
I strongly recommend you to take a look React’s website and start with its tutorial:
Besides React, it is quite possible that you may heard technologies like Angular or Vue.js. In fact, they have their own solutions for the same goal:
Building well-structured applications efficientlyBelow you can find a very detailed comparison between React, Vue and Angular:
From the official website:
And another great feature is the support for native code. You want to optimise some part of your application? Or you need to get close to native level due to some performance requirement? Just implement your feature with native language and use it inside React Native.
Again, singularity. One codebase for both platforms with native-like performance.
Additionally, both Angular and Vue have their own mobile frameworks in their ecosystem:
If you find any misleading, wrong or incomplete part please leave a comment. Any kind of feedback would be appreciated.
Thanks for reading!