What does Javascript Library do?
A JavaScript library is simply a third party package of JavaScript code, which gives you a lot of typically functions, objects you can use to make your life easier. It makes our code leaner and therefore easier to manage.
So the editors of the library already wrote and optimized a lot of code you would have to write otherwise so that you can use simplified function of achieving the same you that before.
Now with less code, allowing you to focus on your business logic. And since you use less code to also write less error prone(likely to do, have, or suffer from something) code, that is what a library does.
library simplified your code by using functions & objects
=> wrote less code => write less error prone code
=>It's allowing you to focus on your business logic
Why we using it? (feat. Limitation of Javascript)
Library VS Framework?
Library is absolutely fine for smaller apps or if you only want to enhance tiny things about existing HTML pages.
But for bigger applications, you might still hit that border where this becomes too cumbersome(heavy) and we're managing the state becomes very difficult.
That is one of the major things frameworks solve for you.
what is the difference?
What's the difference between a framework like ANGULAR and a library like Lodish or Jqury?
Libraries typically fix certain problems.
But still, the overall how you create your application, like structure of your app, is something you have to decide on.
A framework does more than just giving you some utility functions or focusing on one area.
A framework typically gives you a structure whether a Library you have to decide on
Benefits of Framework
A framework typically** gives you a structure on how you should write your app and takes care about a lot of the low level nitty gritty details which you would have to do otherwise.
For example, adding or removing items to and from the DOM.
That is a task typically done by the framework automatically.
You have still vanilla JavaScript as a code base, but a certain structure on how to write your code to easily get features like adding or removing elements so that you can focus on your business logic even more.
Framework is easy to manipulate DOM
by automatically adding or removing elements from the DOM
vue.js
Vue works with templates. That means that it basically needs a template for the actual HTML code.
We already have a HTML code and we can tell you choose to use this as a template by wrapping it in a div, for example, taking all that code and putting it into that div.
So what I can do here is I can say new view to create a new view instance.
That is how Veux works and then we pass a JavaScript object to configure it.
To that object we can set a couple of properties, the first important one being the ele property where we tell Vue which part in our HTML code should you take control.
So which part you should you take as a template we can work with.
And here we use a normal CSS as selector, for example, hash tag app to select this whole dev here,
So now you can say and now we want to add the same functionality we had before making this button clickable
this is a much easier way of managing our code, much more understandable.
And we don't have to create all these elements manually.
It gets especially easy if we now also add the functionality to remove the elements.
All we have to do for this is add another click listener to the list item and you just automatically added for every new list item it automatically generates.
v-on click here where I say remove to do.
the only thing I have to do here is I have to pass to to do as an argument, to remove, to do now if dad, we can add a new method, remove to do.
And I know that I will get these to do, which should be removed as an argument as I just passed this here.
You don't have to write a dorm access beauteous will do this for you, will even do it in a very efficient way for you so that you have a great chance of getting better performance than with your code.
And this, I think, is the very clean code, very understandable.
The relationship between (libraries - frameworks - build tools - new languages)
Now that's nice, but the JavaScript, the world has more things than just libraries and frameworks, which we kind of understand now.
We also have things like ES6, the next JavaScript version, basically TypeScript Webpack and Babel.
You might have heard about these things, but what do they mean? Which role do they play?
Webpack and Babel - build tool
these are basically build tools,
packages we use during development and that's important,
which play no role once the app is running on a server,
but which we use during development to make our life, our developers life a bit easier.
They allow us to use features we couldn't use otherwise in conjunction with frameworks.
Bulid tools may allow us to use certain features easier to split our code over multiple files and then bundled together into one bundle which we ship in the end, or to optimize Minifie our code.
by using Bulid tools we can optimize Minify our code.
ES6 & Typescript
But they are also connected to things like ES6 and TypeScript.
You might not be aware of it, but JavaScript is versioned and regularly we receive new versions of JavaScript (ES6).
A newer version which might be available isn't automatically supported by all browsers because old browsers typically aren't updated.
ES6, the next version of JavaScript and is generally available but if you were to ship your code like as same as ES5 (currently version), it wouldn't run in all browsers.
typescript is kind of the same as ES6 although it's not a next version.
Typescript of course also doesn't run the browser.
It's a separate language developed by Microsoft, which builds up on JavaScript and adds new features.
ES6 & Typescript aren't automaticallly supported by all browers
Transpiler - roles of build tool (feat. Webpack, Babel)
That is why we have a Web page, for example, a built tool and specifically Babel a transpiler which allows us to use ES6 during development so that we can take advantage of all these nice features.
It basically comes up with ways of rewriting our ES6 code in is ES5 code so that we can use new features, but ship working code and typescript is kind of the same.
So this also has to be compiled with a different compiler.
Transpiler like Webpack, Babel rewriting our code in to ES5 code so that browser can understand our code
Totally together (libraries - frameworks - built tools - new languages)
And that's how dead(=totally) works together, how we have these different pieces like different languages, built tools and then libraries and frameworks which we already learned about.
