Что быстрее нативный javascript или typescript

TypeScript vs. JavaScript: Which is the better pick?

Deciding what programming language to use can be challenging when you begin a new development project. The most popular programming languages in the web development industry are JavaScript and TypeScript. TypeScript vs JavaScript the most awaited face-off in the quest for reliable programming languages for development projects.

Javascript is one of the most popular programming languages and has been around for many years. This software is straightforward to learn, intuitive to use, and makes it easy for developers to build stunning projects.

Whenever one language arises, an alternative is always available. There is a famous typescript vs. javascript debate, and we are discussing TypeScript.

Here’s an in-depth guide to everything you need to know about both languages and how to decide which one to choose for your new development project.

About JavaScript

The JavaScript (JS) programming language is one of the most popular programming languages on the Internet. The software is used for creating and designing dynamic web pages. Scripting or programming languages allow developers to implement various elements on a website or page.

A popular frontend technology, it is user-friendly even for beginners. Aside from this language, learning other languages is relatively straightforward. Coders with little or no programming experience may also know the JavaScript language.

To stay ahead in the competition with top-notch Vue.Js Development Services, it is a great choice to consult a world-class development company.

Key features

The JavaScript language is cross-platform.
The learning curve is steep.
Getting started is easy and friendly.
You can use JavaScript on the server and the client.

About TypeScript

This high-level language is free, open-source, and used to develop complex web pages. In recent years, TypeScript has rapidly grown as a strict syntactical superset of JavaScript. Additionally, TypeScript is also used by web browsers as the default language technology for both client-side and server-side interactions.

The superset of JavaScript, TypeScript, has given it an edge over the latter. It is an extension of the pure JavaScript code, which improves the developer’s experience by extending it over it. TypeScript playgrounds can also be used for building and managing JavaScript projects on a large scale.

Key features

Refactoring and bug prevention.
Navigating and discovering code.
Maintenance is excellent.
The TypeScript language provides developers with a robust productivity tool.

TypeScript vs JavaScript: Which one to choose?

JavaScript

Here are some reasons why JavaScript would be a better choice than TypeScript:

Code is written for the browser, making it ideal for dynamic websites and web applications.
A dynamic language that also integrates with Node.js for backend development
There are no compatibility issues with web browsers because it works across them all

TypeScript

Why use TypeScript and go through additional steps since it is based on JS and can be transformed into JavaScript code? How do JS and TypeScript differ? There are numerous reasons why TypeScript is better.

You can detect errors earlier by editing errors during compile time rather than run time.
You can get suggestions based on the input context with intelligent autocompletion and IntelliSense.
TypeScript supports interfaces, classes, and other concepts of object-oriented languages.
TypeScript syntax is more suitable for large-scale projects with complex data structures due to its additional attributes, including type annotations, inference, and static type definitions.

Detailed comparison between TypeScript vs. JavaScript

Community

Community is a great factor in pointing out the detailed comparison between the top-notch programming languages. To begin with, TypeScript is not only difficult to learn programming but has a closed community with few resources to address the concerns that come your way.

JavaScript is already in the market for so long and has a very helpful community that is ready to address the concerns of the programmers. With JavaScript, you can never go wrong with the development project.

Easy Learning

Javascript is not popular because of its features and capabilities. It is even very easy to learn and strongly overpowers TypeScript in learning. JavaScript does not require any setup or configuration to begin the development.

Whenever you struggle with the scripting knowledge, Javascript has a great developer community available to assist.

Whereas TypeScript has a complex learning structure that requires much effort and a more than basic setup.

Maintainability of code

Code maintenance is the most crucial part in a development project. This is a factor where the differences between JavaScript and TypeScript continue. JavaScript makes it challenging for you to maintain the code because of its complex nature in dynamic typing and lags behind for maintaining the code safety.

In contrast, TypeScript has impressive code maintenance because of the typographical conventions required in writing code and static typing. Hence, a developer does not have to go through the hassle of fixing code and bugs without the need of rewriting Extensive code.

Facilities for debugging

Typescript is a language for compiling code. It requires the declaration of variables while coding. As a result, errors are not handled during compilation due to this property. Additionally, it facilitates and simplifies the process of debugging.

The Javascript language is an interpreter language. It is impossible to find code errors by scanning line by line with a compiler. As a result, it is difficult for programmers to detect errors related to variable types.

Data biding

Using data binding, applications can display data in real time from their user interfaces (UIs). Classes (objects) have properties that can be enforced through interfaces. As a result, Typescript makes use of these concepts.

Dynamic web pages can be created with Javascript by using first-class functions. The UI is not connected to the data. As a result, data binding and interface capabilities are not possible.

Conclusion

Typescript or Javascript Which is better? There are advantages and disadvantages to both Typescript and Javascript. In terms of when to use Typescript or Javascript, it depends on the project’s requirements and the developer’s preference. If you are new to coding, Javascript might be a good option. Conversely, typescript is better suited to coders focused on structured code and server-side languages.

TypeScript vs. JavaScript: Your Go-to Guide

Considering you can include as much plain JavaScript as you like in your TypeScript project, what factors should you consider when choosing TypeScript for your application? Let’s explore.

authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Considering you can include as much plain JavaScript as you like in your TypeScript project, what factors should you consider when choosing TypeScript for your application? Let’s explore.

authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

By Daniele Monesi

Verified Expert in Engineering

Daniele is a full-stack developer and cloud solution architect who has worked with many software environments, such as Java-based back ends, Angular- and React-based front ends, and serverless or hybrid cloud infrastructures.

Expertise

Years of Experience

TypeScript or JavaScript? Developers contemplate this choice for greenfield web or Node.js projects, but it’s a question worth considering for existing projects too. A superset of JavaScript, TypeScript offers all of the features of JavaScript plus some additional perks. TypeScript intrinsically encourages us to code cleanly, making the code more scalable. However, projects can contain as much plain JavaScript as we like, so using TypeScript is not an all-or-nothing proposition.

The Relationship Between TypeScript and JavaScript

TypeScript adds an explicit type system to JavaScript, allowing for the strict enforcement of variable types. TypeScript runs its type checks while transpiling—a form of compiling that converts TypeScript code to the JavaScript code web browsers and Node.js understand.

TypeScript vs. JavaScript Examples

Let’s start with a valid JavaScript snippet:

let var1 = "Hello"; var1 = 10; console.log(var1);

Here, var1 starts out as a string , then becomes a number .

Since JavaScript is only loosely typed, we can redefine var1 as a variable of any type—from a string to a function—at any time.

Executing this code outputs 10 .

Now, let’s change this code into TypeScript:

let var1: string = "Hello"; var1 = 10; console.log(var1);

In this case, we declare var1 to be a string . We then try to assign a number to it, which isn’t allowed by TypeScript’s strict type system. Transpiling results in an error:

TSError: ⨯ Unable to compile TypeScript: src/snippet1.ts:2:1 - error TS2322: Type 'number' is not assignable to type 'string'. 2 var1 = 10;

If we were to instruct the transpiler to treat the original JavaScript snippet as if it were TypeScript, the transpiler would automatically infer that var1 should be a string | number . This is a TypeScript union type, which allows us to assign var1 a string or a number at any time. Having resolved the type conflict, our TypeScript code would transpile successfully. Executing it would produce the same result as the JavaScript example.

TypeScript vs. JavaScript From 30,000 Feet: Scalability Challenges

JavaScript is ubiquitous, powering projects of all sizes, applied in ways that would have been unimaginable during its infancy in the 1990s. While JavaScript has matured, it falls short when it comes to scalability support. Accordingly, developers grapple with JavaScript applications that have grown in both magnitude and complexity.

Thankfully, TypeScript addresses many of the issues of scaling JavaScript projects. We’ll focus on the top three challenges: validation, refactoring, and documentation.

Validation

We rely on integrated development environments (IDEs) to help with tasks such as adding, modifying, and testing new code, but IDEs cannot validate pure JavaScript references. We mitigate this shortcoming by monitoring vigilantly as we code to stave off the possibility of typos in variables and function names.

The magnitude of the issue grows exponentially when the code originates from a third party, where broken references in seldom-executed code branches could easily go undetected.

In contrast, with TypeScript, we can focus our efforts on coding, confident that any errors will be identified at transpile time. To demonstrate this, let’s begin with some legacy JavaScript code:

const moment = require('moment'); const printCurrentTime = (format) => < if (format === 'ISO')< console.log("Current ISO TS:", moment().toISO()); >else < console.log("Current TS: ", moment().format(format)); >>

The .toISO() call is a typo of the moment.js toISOString() method but the code would work, provided the format argument isn’t ISO . The first time we try to pass ISO to the function, it will raise this runtime error: TypeError: moment(. ).toISO is not a function .

Locating misspelled code may be difficult. The current codebase may not have a path to the broken line, in which case our broken .toISO() reference wouldn’t be caught by testing.

If we port this code to TypeScript, the IDE would highlight the broken reference, prompting us to make corrections. If we do nothing and attempt to transpile, we would be blocked, and the transpiler would generate the following error:

TSError: ⨯ Unable to compile TypeScript: src/catching-mistakes-at-compile-time.ts:5:49 - error TS2339: Property 'toISO' does not exist on type 'Moment'. 5 console.log("Current ISO TS:", moment().toISO());

Refactoring

While typos in third-party code references are not uncommon, there’s a different set of issues associated with typos in internal references, like this one:

const myPhoneFunction = (opts) => < // . if (opts.phoneNumbr) doStuff(); >

A sole developer can locate and fix all instances of phoneNumbr to end with er easily enough.

But the larger the team, the more this simple, common mistake is unreasonably costly. In the course of performing their work, colleagues would need to be aware of and propagate such typos. Alternatively, adding code to support both spellings would bloat the codebase unnecessarily.

With TypeScript, when we fix a typo, dependent code will no longer transpile, signaling colleagues to propagate the fix to their code.

Documentation

Accurate and relevant documentation is key to communication within and between teams of developers. JavaScript developers often use JSDoc to document expected method and property types.

TypeScript’s language features (e.g., abstract classes, interfaces, and type definitions) facilitate design-by-contract programming, leading to quality documentation. Moreover, having a formal definition of the methods and properties to which an object must adhere helps to identify breaking changes, create tests, perform code introspection, and implement architectural patterns.

For TypeScript, the go-to tool TypeDoc (based on the TSDoc proposal) automatically extracts type information (e.g., class, interface, method, and property) from our code. Thus, we effortlessly create documentation that is, by far, more comprehensive than that of JSDoc.

Advantages of TypeScript vs. JavaScript

Now, let’s explore how we can use TypeScript to address these scalability challenges.

Advanced Code/Refactoring Suggestions

Many IDEs can process information from the TypeScript type system, providing reference validation as we code. Even better, as we type, the IDE can deliver relevant, at-a-glance documentation (e.g., the arguments a function expects) for any reference and suggest contextually correct variable names.

In this TypeScript snippet, the IDE suggests an autocompletion of the names of the keys inside the function’s return value:

/** * Simple function to parse a CSV containing people info. * @param data A string containing a CSV with 3 fields: name, surname, age. */ const parsePeopleData = (data: string) => < const people: [] = []; const errors: string[] = []; for (let row of data.split('\n')) < if (row.trim() === '') continue; const tokens = row.split(',').map(i =>i.trim()).filter(i => i != ''); if (tokens.length < 3)< errors.push(`Row "$" contains only $ tokens. 3 required`); continue; > people.push(< name: tokens[0], surname: tokens[1], age: +tokens[2] >) > return ; >; const exampleData = ` Gordon,Freeman,27 G,Man,99 Alyx,Vance,24 Invalid Row,, Again, Invalid `; const result = parsePeopleData(exampleData); console.log("Parsed People:"); console.log(result.people. map(p => `Name: $\nSurname: $\nAge: $`) .join('\n\n') ); if (result.errors.length > 0)

My IDE, Visual Studio Code, provided this suggestion (in the callout) when I started to call the function (line 31):

At the point of typing parsePeopleData(), the IDE shows a tooltip from the TypeScript transpiler that reads

[]; errors: string[]; >» followed by the text contained in the multiline comment before the function definition, «A string containing a CSV with 3 fields: name, surname, age. Simple function to parse a CSV containing people info.».» />

What’s more, the IDE’s autocomplete suggestions (in the callout) are contextually correct, showing only valid names within a nested key situation (line 34):

Three suggestions (age, name, and surname) that popped up in response to typing

`Name: $

Such real-time suggestions lead to speedier coding. Moreover, IDEs can rely on TypeScript’s rigorous type information to refactor code on any scale. Operations such as renaming a property, changing file locations, or even extracting a superclass become trivial when we are 100% confident in the accuracy of our references.

Interface Support

In contrast with JavaScript, TypeScript offers the ability to define types using interfaces. An interface formally lists—but doesn’t implement—the methods and properties an object must include. This language construct is particularly helpful for collaboration with other developers.

The following example highlights how we can leverage TypeScript’s features to implement common OOP patterns neatly—in this case, strategy and chain of responsibility—thus improving the previous example:

export class PersonInfo < constructor( public name: string, public surname: string, public age: number )<>> export interface ParserStrategy < /** * Parse a line if able. * @returns The parsed line or null if the format is not recognized. */ (line: string): PersonInfo | null; >export class PersonInfoParser < public strategies: ParserStrategy[] = []; parse(data: string)< const people: PersonInfo[] = []; const errors: string[] = []; for (let row of data.split('\n'))< if (row.trim() === '') continue; let parsed; for (let s of this.strategies)< parsed = s(row); if (parsed) break; >if (!parsed)< errors.push(`Unable to find a strategy capable of parsing "$"`); > else < people.push(parsed); >> return ; > > const exampleData = ` Gordon,Freeman,27 G;Man;99 Invalid Row,, Again, Invalid `; const parser = new PersonInfoParser(); const createCSVStrategy = (fieldSeparator = ','): ParserStrategy => (line) => < const tokens = line.split(fieldSeparator).map(i =>i.trim()).filter(i => i != ''); if (tokens.length < 3) return null; return new PersonInfo(tokens[0], tokens[1], +tokens[2]); >; parser.strategies.push( (line) => < try < const = JSON.parse(line); return new PersonInfo(name, surname, age); > catch(err) < return null; >>, createCSVStrategy(), createCSVStrategy(';') ); const result = parser.parse(exampleData); console.log("Parsed People:"); console.log(result.people. map(p => `Name: $\nSurname: $\nAge: $`) .join('\n\n') ); if (result.errors.length > 0)

ES6 Modules—Anywhere

As of this writing, not all front-end and back-end JavaScript runtimes support ES6 modules. With TypeScript, however, we can use ES6 module syntax:

import * as _ from 'lodash'; export const exampleFn = () => console.log(_.reverse(['a', 'b', 'c']));

The transpiled output will be compatible with our selected environment. For example, using the compiler option —module CommonJS , we get:

"use strict"; exports.__esModule = true; exports.exampleFn = void 0; var _ = require("lodash"); var exampleFn = function () < return console.log(_.reverse(['a', 'b', 'c'])); >; exports.exampleFn = exampleFn;

Using —module UMD instead, TypeScript outputs the more verbose UMD pattern:

(function (factory) < if (typeof module === "object" && typeof module.exports === "object") < var v = factory(require, exports); if (v !== undefined) module.exports = v; >else if (typeof define === "function" && define.amd) < define(["require", "exports", "lodash"], factory); >>)(function (require, exports) < "use strict"; exports.__esModule = true; exports.exampleFn = void 0; var _ = require("lodash"); var exampleFn = function () < return console.log(_.reverse(['a', 'b', 'c'])); >; exports.exampleFn = exampleFn; >);

ES6 Classes—Anywhere

Legacy environments often lack support for ES6 classes. A TypeScript transpile ensures compatibility by using target-specific constructs. Here’s a TypeScript source snippet:

export class TestClass

JavaScript output depends on both the module and the target, which TypeScript lets us specify.

Here’s what —module CommonJS —target es3 yields:

"use strict"; exports.__esModule = true; exports.TestClass = void 0; var TestClass = /** @class */ (function () < function TestClass() < this.hello = 'World'; >return TestClass; >()); exports.TestClass = TestClass;

Using —module CommonJS —target es6 instead, we get the following transpiled result. The class keyword is used to target ES6:

"use strict"; Object.defineProperty(exports, "__esModule", < value: true >); exports.TestClass = void 0; class TestClass < constructor() < this.hello = 'World'; >> exports.TestClass = TestClass;

Async/Await Functionality—Anywhere

Async/await makes asynchronous JavaScript code easier to understand and maintain. TypeScript offers this functionality to all runtimes, even to those that do not provide async/await natively.

Note that to run async/await on older runtimes like ES3 and ES5, you’ll need external support for Promise -based output (e.g., via Bluebird or an ES2015 polyfill). The Promise polyfill that ships with TypeScript integrates easily into the transpiled output—we just need to configure the lib compiler option accordingly.

Support for Private Class Fields—Anywhere

Even for legacy targets, TypeScript supports private fields in much the same way as do strongly typed languages (e.g., Java or C#). In contrast, many JavaScript runtimes support private fields through the hash prefix syntax, which is a finished proposal of ES2022.

Disadvantages of TypeScript vs. JavaScript

Now that we’ve highlighted the principal benefits of implementing TypeScript, let’s explore scenarios where TypeScript may not be the right fit.

Transpilation: Potential for Workflow Incompatibility

Specific workflows or project requirements may be incompatible with TypeScript’s transpilation step: for instance, if we needed to use an external tool to change the code after deployment or if the output generated must be developer-friendly.

For example, I recently wrote an AWS Lambda function for a Node.js environment. TypeScript was a poor fit because requiring transpilation would prevent me, and other team members, from editing the function using the AWS online editor. This was a deal breaker for the project manager.

Type System Works Only Until Transpile Time

TypeScript’s JavaScript output doesn’t contain type information, so it won’t perform type checks and, therefore, type safety can break at runtime. For example, suppose a function is defined to always return an object. If null is returned from its use within a .js file, a runtime error will occur.

Type information-dependent features (e.g., private fields, interfaces, or generics) add value to any project but are scraped off while transpiling. For example, private class members would no longer be private after transpilation. To be clear, runtime issues of this nature are not unique to TypeScript, and you can expect to encounter the same difficulties with JavaScript too.

Combining TypeScript and JavaScript

Despite TypeScript’s many benefits, sometimes we can’t justify converting an entire JavaScript project all at once. Fortunately, we can specify to the TypeScript transpiler—on a file-by-file basis—what to interpret as plain JavaScript. In fact, this hybrid approach can help to mitigate individual challenges as they arise over the course of a project’s life cycle.

We may prefer to leave JavaScript unchanged if the code:

Was written by a former colleague and would require significant reverse-engineering efforts to convert to TypeScript.
Uses technique(s) not allowed in TypeScript (e.g., adds a property after object instantiation) and would require refactoring to adhere to TypeScript rules.
Belongs to another team that continues to use JavaScript.

In such cases, a declaration file ( .d.ts file, sometimes called the definition file or typings file) gives TypeScript enough type data to enable IDE suggestions while leaving JavaScript code as is.

Many JavaScript libraries (e.g., Lodash, Jest, and React) provide TypeScript typings files in separate type packages, while others (e.g., Moment.js, Axios, and Luxon) integrate typings files into the main package.

TypeScript vs. JavaScript: A Question of Streamlining and Scalability

The unrivaled support, flexibility, and enhancements that are available through TypeScript significantly improve the developer experience, enabling projects and teams to scale. The chief cost of incorporating TypeScript into a project is the addition of the transpilation build step. For most applications, transpiling to JavaScript is not an issue; rather, it’s a stepping stone to the many benefits of TypeScript.

Understanding the basics

Is TypeScript better than JavaScript?

TypeScript is better than JavaScript in terms of language features, reference validation, project scalability, collaboration within and between teams, developer experience, and code maintainability.

Why is TypeScript used instead of JavaScript?

JavaScript has evolved but continues to have codebase and development-team scaling issues that TypeScript can solve.

Is TypeScript front-end or back-end?

TypeScript code can be used for both front-end and back-end projects because it transpiles to JavaScript before running.

Is TypeScript’s performance better than JavaScript’s?

TypeScript code typically won’t perform any differently than JavaScript code, since it’s transpiled to JavaScript before running. But in the sense of developer performance: Yes, TypeScript makes it easier to write accurate code more quickly and catch bugs prior to runtime.

Что быстрее нативный javascript или typescript

The basics of working with pseudocode Writing pseudocode is a great way to practice problem-solving skills, a crucial aspect in programming. It helps developers .
The growing link between microservices and WebAssembly The microservices architecture has become popular, but it runs into complexity and cost challenges. Implementing WebAssembly can .
Serverless vs. containers: Which one for microservices apps? How do you know when microservices should run in containers vs. serverless functions? A big factor is what you plan to do with .

The dos and don’ts of scalability testing Effective scalability testing helps to evaluate customer experience, protect against major failures and safeguard an .
Docker vs. OpenShift: What are the main differences? Docker and OpenShift have their strengths and weaknesses, and the choice between the two depends on the specific needs of your .
The key role testing plays in a Three Amigos strategy Because testers are skilled in asking questions and suggesting scenarios that lead to alternative workflows, they can be .

Deploy ML on edge devices with SageMaker, IoT Greengrass Amazon SageMaker, ONNX and AWS IoT Greengrass help deploy machine learning models to edge devices. Steps include component .
Optimize ML models with Amazon SageMaker Neo Machine learning models that run inference tasks require optimized performance and monitoring. Amazon SageMaker Neo can be a .
Cloud experts weigh in with 2023 AWS re:Invent predictions As AWS re:Invent 2023 approaches, our experts predict what announcements will come out of the AWS conference. Read up on this .

AI in risk management: Top benefits and challenges explained AI and machine learning tools can aid in risk management programs. Here are the potential benefits, use cases and challenges your.
SBOM formats compared: CycloneDX vs. SPDX vs. SWID Tags Organizations can choose between three SBOM formats: CycloneDX, SPDX and SWID Tags. Learn more about them to determine which fits.
Security highlights from KubeCon + CloudNativeCon 2023 KubeCon + CloudNativeCon provided valuable insights for security teams supporting cloud-native development, including securing .

AWS Control Tower aims to simplify multi-account management Many organizations struggle to manage their vast collection of AWS accounts, but Control Tower can help. The service automates .
Break down the Amazon EKS pricing model There are several important variables within the Amazon EKS pricing model. Dig into the numbers to ensure you deploy the service .
Compare EKS vs. self-managed Kubernetes on AWS AWS users face a choice when deploying Kubernetes: run it themselves on EC2 or let Amazon do the heavy lifting with EKS. See .

Что быстрее нативный javascript или typescript

SM people enjoy their pain too 😉 Typescript for «Consumer» is great, but as soon as you must write own complex typings, that is everything, but really not a joy.

> I do TS for years now and still today I’m spending more time on fighting/pleasing TS compared to the actual code.

Admittedly, this mirrors my own experience, at least in some cases, which I shall not deny.

Was called in to help with this one particular TypeScript codebase that used React a while back, it was a mess. I suspect that some of the chosen abstractions were overengineered and overcomplicated (and perhaps underdocumented), but at the same time TypeScript made things more finicky and as a result the development velocity tended to be on the lower side of things, when compared to similar projects with JS. This was especially noticeable when new developers needed to be onboarded, though at the very least refactoring could be done with more confidence. Essentially they were not dealing with just sub-optimal code structure/architecture, not just the ever increasing complexity of React, but also how it all integrated with TypeScript on top of that.

It’s a bit of a double edged sword, because when done right, TypeScript is objectively better than JS in at least some regards (refactoring for one, the type system obviously but also how well IDEs can figure out autocomplete because of it, or highlight issues that would otherwise manifest at runtime only with JS), however there is also potential for things to get much worse than your typical JS codebase, when done wrong.

This might be a silly comparison, but I’ll compare it to something like PHP: when used correctly, you’ll get something that lets you iterate pretty fast and just ship stuff, whereas if you go about it the wrong way you’ll probably have a badly developed unreadable mess that’s full of bugs or security issues, for a variety of reasons. In my experience, TypeScript codebases range from very good to very bad, whereas JS tends to be more mediocre in general, at least in regards to complexity and iteration speed. In regards to maintenance, TypeScript will win in most cases.

Use TypeScript responsibly and you’ll have a decent time. Give it to someone who wants to be clever about things and you’ll have lots of accidental complexity to deal with, more so than with the alternatives. Then again, personally I think that Angular did TS better than React or Vue, so this might be a niche view in of itself.

Sharing your experience is fine. Rebutting someone saying “this saves me time”, much less in a comment where they’re thanking someone for something they help make, is a bit ridiculous.

> I remember how awesome it felt when JS came out and we could write code without doing type juggling.

You enjoy working with dynamic typing. It more aligns with how you think and program. That’s okay!

TypeScript may never be worth it, to you, and that’s okay too! Not everyone likes and appreciates static typing.

If you ever do come to the datk side and think TypeScript is worth your time, it will be because that part is not a time waster but a time saver.

> Hmm, not my experience. I do TS for years now and still today I’m spending more time on fighting/pleasing TS compared to the actual code.

What are you doing exactly? I like TS, because it’s one of the easiest to use type systems.

I’m also intrigued that you used C++ and think TS is bad, C++ error messages are legendary for being hard to understand.

What’s Math.sqrt(«hello»)?
I use TS daily and I think this sort of argument doesn’t give TS the credit it deserves.

Sure, you _could_ use it to check that you aren’t making obvious errors like this (but this seems constrained to the «convince me that it’s worth it» level of functionality, as it is just a nice-to-have for an existing working pattern).

Where TS shines for me is that it ENABLES new ways of «ad-hoc» coding where it’s no longer risky to just create «convenience objects» to represent state when prototyping/refactoring, since you can avoid specifying concrete required types across a load of middle-man code and compose types at each level. This enables the pattern of splatting (composition over inheritance) a bunch of inputs to your data together, and then routing them to the points where they are needed. This scales nicely when you introduce monadic fun (processing some data with children, or something delay-loaded) since your type constraints basically write the boilerplate for you (I’m sure co-pilot will make this even more so in the far future).

There’s also the fact that your can have your back-end APIs strongly typed on the front-end via something like GQL or Swagger, and this saves a TON of time for API discoverability.

Or 5/»potato»

In JS it’s NaN, in TypeScript (or any other language with a remotely sane type system) it’s a compilation error that saves you from running into a random NaN at runtime.

You know you can just use transpileOnly option and ignore some errors? I use it like that and it’s helpful to model data and speeds up development.

Assembly? No types there, just registers. The only distinction is floating point and non-floating point registers.

If you’re just looking for general feedback, constructor typing has made my life really hard trying to type an existing JS library. In a JS object instance like `const user = new User()` you can call `this.constructor.staticMethod()` and it calls `staticMethod()` on `User` or up the inheritance chain. But TS doesn’t type `.constructor` so you’re out of luck. In the simple case you call `User.staticMethod()` but that doesn’t work for an instance method on a superclass that wants to call the method of the constructor of the instance.

I understand why JS makes this difficult to type because you can mess around with the constructor. But for normal every day code you just expect `this.constructor` on an instance of `User` to be `User` and it really sucks that it isn’t!

> you can call `this.constructor.staticMethod()` and it calls `staticMethod()` on `User` or up the inheritance chain.

This is where I have come to like typescript. 4 years ago, I would have agreed with you, but TS have moved me into a world where I wouldn’t write that kind of code any more, and it honestly makes me sick to look at.

Instead I would just do `User.staticMethod` because this accomplishes several things:

 - super classes shouldn't know about inheriting classes. If they do, TS gives you interfaces and abstract classes for this purpose. - it still crawls up the proto chain, so the inheriting class doesn't need to know about every super class - no risk in `this` pointing to something unintentional (if someone calls or apply's your method) - shorter code, easier to read IMO, especially for less experienced devs

I might agree with you but sometimes we have to type up JS code that is written in different styles to what we’d personally prefer. TS should (a) let me generate the types that are used in JS. There are areas like proxies where that’s just not possible, but in this case it feels like there’s a disparity between TS and JS over classes. (b) I want to work with this code in my editor without red lines all over the place on perfectly valid code.

super classes don’t need to ‘know’ about the inheriting classes for static inheritance to work. i.e. here is a simplified problem in the library I’m trying to add types to:

 static hasField(name) < return false >constructor() < if(this.constructor.hasField('id')) < . >>

 static hasField(name)

(it doesn’t really look like that but you get the idea). That just works in JS, but in TS you get `Property ‘hasField’ does not exist on type ‘Function’`. In the TS definition there are a couple of ways I can trick it to return the right thing for `this.constructor` but if I’m looking at a JS file in vscode with TS’ checkJs flag on then this pattern should just work in my opinion.

edit: And I don’t think I should have to trick it, that makes the definition harder to read and essentially wrong somehow.

Great of you to hop in. Just want to say that while I can typically navigate error messages in TS, I do occasionally have to do some googling on some error messages (specifically ones around generics that have a super type that apparently doesn’t necessarily agree with a subtype or something — still don’t quite get it), and it’s nice to see that the TS team recognizes the obtuseness of these messages is an issue.

TS#### error messages was a brilliant idea to make them more ~googleable~ bingable at least.

Isn’t that pretty standard for compiler error messages? The C# compiler uses CS\d <4>for example. MSVC, MSBuild, various other build tools (at least on the Microsoft side) all use similar patterns with different prefixes.

That being said, it seems like Clang or GCC don’t do that at all, which perplexes me a bit. Perhaps it doesn’t matter much when error messages are never localized.

I guess TypeScript and C# having Anders Hejlsberg in common probably helps with things like that?

(A bit )off topic — chatGPT managed to infer your email address based on this comment. Required some hints though — most likely due to my lack of experience (first try). I was curious to see how it can improve indexing in general.

Thanks for responding, and thanks for your work for the community! I sometimes place myself in the shoes of devs building TypeScript, especially when I am a little frustrated, and most of the time I realize that a lot of these issues are incredibly hard to solve.

> i. Dependency management is indeed frustrating. TypeScript doesn’t create a new major version for every more-advanced check. In cases where inference might improve or new analyses are added, we run the risk of affecting existing builds. My best advice on this front is to lock to a specific minor version of TS.

In my recent case, I needed to update Apollo Server to v4, which needs a newer version of TypeScript (see https://www.apollographql.com/docs/apollo-server/migration#t. ), which in turn broke a type used from ProtobufJS. I am still navigating ProtobufJS source code to figure out what is the correct fix here.

> ii. My anecdotal experience is that library documentation could indeed be better; however, that’s been the case with JavaScript libraries regardless of types.

Actually I think documentation is almost universally bad, I don’t think Go or other languages are that much better (I don’t want to wade into that debate though). The thing is, having TypeScript means you need more documentation. Even some pretty well documented JS/TS libraries completely neglect TypeScript and the end effect is that you end up having to guess things, or start reading source code. I don’t actually know how you could improve this situation.

> iii. Our error messages need to get better — I’m in full agreement with you. Often a concrete repro is a good way to get us thinking. Our error reporting system can often take shortcuts to provide a good error message when we recognize a pattern.

I will look closer at this and start to think of how it could be better when I see a confusing message. I would probably count this as the biggest area that could yield improvement, because most of the time frustration is born of not being able to understand an error message. Often fixing things lead to trial and error. Can I just open an issue in the TypeScript repo for this sort of thing if I have a concrete suggestion?

> iv. Compilation can be a burden from tooling overhead. For the front-end, it is usually less of a pain since tools like esbuild and swc are making these so much faster and seamless (assuming you’re bundling anyway — which is likely if you use npm). For a platform like Node.js, it is admittedly still a bit annoying. You can still use those tools, or you can even use TypeScript for type-checking `.js` files with JSDoc. Long-term, we’ve been investigating ways to bring type annotations to JavaScript itself and checked by TypeScript — but that might be years away.

Once it is part of the language, that will help a lot 🙂 I considered using Deno or Bun to get me there on the server side, but need to be careful with production services.

Re libraries incompatible with certain typescript versions — e.g. protobufjs fix — it’s been my experience that you want to try and only use compilers specific to each library and compile libraries separately. It’s unfortunate but the JS community often tries to run all JS for a project through the same single compiler tool chain, using one global version of the compiler instead of relying on and effectively linking the JS output for each library. Unless you routinely rewrite third-party libraries to match your toolchain’s expectations, you’re going to have a hard time doing that.

For a library that generates code, that’s a special case, as the code it generates must target a particular language version. You have three choices: 1. Upstream a fix as you propose; 2. Side-by-side install both TS 4.6 and TS 4.7 using workspaces or sub-projects and have some of your code compile with 4.6 and then link the results or 3. Find a replacement that is updated to 4.7. For example, https://github.com/stephenh/ts-proto has 4.7 support listed in its readme.

We do generate the protobuf from a different repo which gets published on npm, and we could generate it for different versions of TS. I suppose all of this work is part of the overhead I am not so happy about using TypeScript.

Язык программирования JavaScript: где его используют и почему он популярен

Язык программирования JavaScript: где его используют и почему он популярен главное изображение

Раньше интерфейс сайтов состоял из текстов, ссылок и иллюстраций, а верстали его с помощью языков HTML и CSS.

Все изменилось с созданием JavaScript. Этот язык программирования сделал сайты интерактивными — то есть удобными для пользователя. Появились кнопки, формы, поля ввода и многое другое.

JavaScript (или по-другому JS) — это многофункциональный язык программирования. JavaScript используют не только для создания сайтов, но и для написания очень разных программ.

Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев

Постоянная поддержка от наставника и учебного центра
Помощь с трудоустройством
Готовое портфолио к концу обучения
Практика с первого урока

Вы получите именно те инструменты и навыки, которые позволят вам найти работу

Где используют JavaScript

Фронтенд веб-приложений

С помощью JavaScript разработчики создают веб-приложения — это программы, которые мы запускаем в браузере. К ним относятся почтовые клиенты, редакторы текста, социальные сети, видеохостинги и многое другое.

На JavaScript создают «внешний интерфейс» веб-приложений — фронтенд. С ним взаимодействует пользователь, нажимая на кнопки, плашки, меню.

На JavaScript написан код для популярных сервисов вроде Google Maps, Google Docs, Netflix, eBay.

Бэкенд веб-приложений

Кроме интерфейса, который видят пользователи, у веб-приложений есть и внутренняя часть — бэкенд. Это серверная часть приложения, в которой обычно хранятся базы данных.

У JavaScript есть Node.js — это не отдельный язык программирования, а среда исполнения JavaScript-кода на стороне сервера. С ее помощью можно выполнять операции или обращаться к базам данным.

JavaScript в связке с Node.js используют известные компании PayPal и Walmart для взаимодействия со своими серверами.

Читать:

Как заменить слово возможность

Расширения для браузера

Браузерные расширения — это мини-программы, которые состоят из кода, исполняющегося в браузере. Расширения помогают нам блокировать рекламу, включать VPN, скачивать видео или подсчитывать время, проведенное в интернете. И почти все они написаны на JavaScript.

Мобильные приложения

На JavaScript также пишут приложения для iOS и Android. Для этого есть специальные фреймворки — готовые наборы кода, «каркас» будущих приложений.

JavaScript-фреймворки вроде React Native помогают адаптировать код под мобильные платформы. Это позволяет создавать кроссплатформенные приложения — работающие и под iOS, и под Android — без необходимости нанимать разработчиков для каждой из этих систем и создавать две версии приложения.

На JavaScript написаны мобильные приложения Groupon и LinkedIn.

Игры

На JavaScript можно также писать простые игры. Обычно это браузерные бродилки, но иногда встречаются и интересные инди-проекты вроде «2048», PixelDefense, BrowserQuest.

Также существует Unity3d — среда сценариев для игры на основе JavaScript, которая работает вне браузеров.

Машинное обучение

Чаще всего в машинном обучении используют другие языки программирования, например Python. Однако иногда для этого применяют и JavaScript. Например, когда создают веб-приложения, включая те, которые визуализируют данные из моделей машинного обучения. Или когда пишут веб-страницу с формой, которая отправляет данные на сервер для обработки моделью машинного обучения.

Также для JavaScript уже написано несколько библиотек, — готовых наборов кода — на основе которых можно создать свою нейросеть. Это, например, Brain.js, Deep playground, Synaptic или FlappyLearning.

Базы данных

У JavaScript есть собственный инструмент Mongoose, позволяющий работать с популярной СУБД (системой управления базами данных) MongoDB. Есть и базы данных, например, Clusterpoint, к которым можно писать запросы на JavaScript.

Также есть GraphQL — язык структурированных запросов, позволяющий обращаться к базам данных. Он работает с React и другими популярными фреймворками JavaScript.

Интернет вещей

JavaScript используют и в Интернете вещей (Internet of Things, IoT) — это способ обмена информацией между устройствами, подключенными к одной сети. Примеры таких устройств нам хорошо знакомы: умные часы, фитнес-трекеры, пожарная сигнализация. Для них пишут программы на JavaScript с использованием фреймворков Cylon.js и Johnny-Five.

Перспективы JavaScript

На JavaScript написаны огромные массивы кода. Переписать их вряд ли возможно в короткие сроки, да и пока незачем. А значит, в ближайшем будущем будут востребованы и специалисты, способные работать с JavaScript и поддерживать на нем программы.

Вокруг JavaScript сформировалась огромная экосистема библиотек и фреймворков, таких как React, Angular, и Vue.js. Эти инструменты делают разработку более эффективной. Владение ими — обязательное требование, которое есть во многих вакансиях.

Сейчас активно развивается и платформа Node.js, с помощью которой, как мы уже разобрались, можно писать серверные приложения. Так что бэкенд на JavaScript также будет востребован — подробнее об этом можно прочитать в другой нашей статье.

Google сейчас активно развивает сегмент прогрессивных веб-приложений — это смесь стандартного сайта и мобильного приложения. Таким решениям — progressive web apps — предрекают широкие перспективы. Они выгодны для бизнеса, поэтому имеют шанс на часть рынка, которая пока что принадлежит приложениям, разработанным только под одну платформу.

Все это в совокупности делает JavaScript перспективным языком программирования, который будет продолжать играть важную роль в разных сферах: от веб-разработки до геймдизайна.

Сколько зарабатывают программисты на JavaScript

В сентябре 2023 на hh.ru опубликовали 7 463 вакансии разработчиков на JavaScript.

В большинстве из них уровень зарплат не указан, но мы можем ориентироваться на исследования «Хабр Карьеры». Они основаны на информации работодателей, размещавших вакансии на сайте, и данных из опросов уже работающих программистов.

Фронтендеры на JavaScript зарабатывают:

72 000 рублей — джуны (начинающие)
169 000 рублей — мидлы (специалисты среднего уровня)
278 000 рублей — сеньоры (высококвалифицированные разработчики)
308 000 рублей — тимлиды (главы команд).

Бэкендеры на JavaScript зарабатывают:

70 000 рублей — джуны (начинающие)
168 000 рублей — мидлы (специалисты среднего уровня)
199 000 рублей — сеньоры (высококвалифицированные разработчики).

Фулстек-разработчики на JavaScript зарабатывают:

114 000 рублей — джуны (начинающие)
170 000 рублей — мидлы (специалисты среднего уровня)
273 000 рублей — сеньоры (высококвалифицированные разработчики)
264 000 рублей — тимлиды (главы команд).

Средняя зарплата разработчика на JavaScript в 2023 году — 180 000 рублей. При этом за последний год она выросла на 20%.

Что означает скрипт в названии JavaScript

В начале 90-х годов, когда был создан JavaScript, компания Netscape разрабатывала браузер под названием Netscape Navigator. По задумке, в браузере должна была быть возможность для создания интерактивных и динамических веб-страниц.

Компания наняла программиста Брендана Айка, чтобы разработать новый язык программирования. Он должен был называться LiveScript. Но из-за популярности языка Java (разработанного компанией Sun Microsystems), компания Netscape решила изменить его имя на JavaScript, чтобы привлечь внимание и ассоциировать его с Java.

JavaScript — это язык программирования, который используется для написания скриптов. Скрипты — это небольшие программы, которые выполняются внутри веб-браузера и добавляют интерактивность на веб-страницах. Например, с помощью JavaScript можно создавать валидацию форм, анимации, обработку событий (например, кликов мыши), и многое другое, что делает веб-страницы более динамичными и удобными для пользователей.

JavaScript — язык программирования, на котором можно написать скрипт. Это такая небольшая программа, которая выполняется внутри браузера и добавляет странице интерактивность. Благодаря скрипту и программам на JavaScript мы можем ставить лайки понравившемуся контенту, писать комментарии, делиться постами в социальных сетях и многое другое.

Чем JavaScript отличается Java

JavaScript и Java — это два разных языка программирования, их путают только из-за похожего названия.

Java — гораздо сложнее и тяжелее, для исполнения скриптов в браузере он не подходит. Java применяют для разработки серверных приложений, игр, банковских систем и программ для Big Data. Так что сферы применения у JavaScript и Java абсолютно разные.

JavaScript проще Java. Для сравнения, стандартная программа «Hello, world!» на JavaScript занимает всего одну строчку:

console.log("Hello, World!");

А на Java — пять:

public class HelloWorld  public static void main(String[] args)  System.out.println("Hello, World!"); > >

Что касается востребованности, то оба языка уверенно входят в десятку самых популярных языков программирования.

В чем особенности JavaScript

Интеграция с HTML и CSS

HTML — язык разметки, а CSS — таблицы стилей. На них нельзя писать полноценный код: можно только размещать элементы на странице сайта.

А вот на JavaScript уже можно писать код, и этот язык интегрирован с языками разметки. То есть если нужно добавить в разметку скрипт, туда вписывают код на JavaScript.

    Здесь может быть ваш скрипт

Но чаще на страницу просто вставляют ссылку на файл: это позволяет использовать один скрипт на многих страницах и не редактировать каждую из них.

Мультипарадигменность

В программировании есть три основные парадигмы:

Объектная — в ней оперируют функциями и набором данных, а код строят как систему отношений между ними.
Функциональная — используют математические функции. Из-за отсутствия переменных, меняющих значения, результат запросов в этой парадигме всегда одинаковый.
В императивной — используют переменные, которым прописывают значения, и инструкции, выполняющиеся последовательно.

Особенность JavaScript в том, что язык позволяет использовать любую из этих парадигм, что дает разработчику больший простор решений при написании кода.

Динамическая типизация

В языках программирования используют набор правил для разделения информации по классам — это называют типизацией. В JavaScript она динамическая. Это значит, что при создании переменной не нужно обязательно задавать ее тип, то есть относить к определенной группе данных.

Преимущества JavaScript

Не зависит от платформы. Если вы захотите запустить программу на JavaScript, не придется ставить дополнительных приложений: это сделает любой браузер. Другие языки потребуют установки компилятора, который исполнит код, или среды разработки (IDE).
Нетребовательный. Так как JavaScript исполняет код в браузере, программа на нем не нагружает сервер, а время ответа становится минимальным. Например, когда вы придумываете новый пароль — оповещение о том, что он недостаточно сложный появляется моментально. Это заслуга JavaScript.
Прост в изучении. JavaScript входит в топ самых легких языков программирования. При этом у него огромное комьюнити и большое количество инструментов, облегчающих жизнь разработчика.

Недостатки JavaScript

Проблема типов данных. Переменные в JavaScript могут менять свой тип данных в процессе выполнения программы. Представьте, что у нас есть переменная, в которой написано «1000». Эта запись может быть как числом, так и просто содержимым строки — текстом. Сложить строку и число в большинстве языков программирования — нельзя. А JavaScript может просто выдать результат вычислений. За счет этого в коде возникают непредвиденные ошибки, которые бывает сложно найти.

const sum = (num1, num2) => num1 + num2 sum(1, 2) // 3 sum('hello', 2) // 'hello2'

Слишком много дополнительных библиотек и фреймворков. Чтобы пользоваться всеми возможностями JavaScript, нужны дополнительные инструменты. Их выбор — сама по себе сложная задача. Нужно, чтобы они не конфликтовали друг с другом, правильно взаимодействовали, и их поддержка не прекратилась в один неприятный момент. Главный минус для начинающего программиста на JavaScript — чтобы начать карьеру в коммерческой разработке, потребуется изучить несколько инструментов. А затем для перехода в новый проект — еще несколько.
Проблемы с производительностью. Интерпретируемость JavaScript принято считать достоинством, но иногда она становится и недостатком. При обработке больших массивов данных операции могут выполняться менее эффективно, чем на других языках.

Пишем первую программу на JavaScript

По традиции обучение начинают с самой простой программы, которая умеет выводить на экран надпись: «Hello, world!». Чтобы создать ее на JavaScript, потребуется только браузер.

Откройте в браузере «Инструменты разработчика», нажав клавишу F12 или «Просмотр кода страницы». В браузере откроется панель, отыщите в ней вкладку «Консоль» и перейдите туда. В ней мы будем писать код.

Напишите в этой вкладке текст:

console.log("Hello, world!");

Затем нажмите Enter. В консоли появится эта надпись.

А теперь попробуйте ввести текст: alert(«Hello, world!») ;. В браузере появится всплывающее окно. Мы часто можем взаимодействовать с ними, заходя на сайты. Например, они просят нас принять сбор сookies. Поздравляем — только что вы написали скрипт для такого окна.

Насколько сложно выучить JavaScript

Синтаксис JavaScript считают одним из самых простых. Именно поэтому он завоевал такую популярность на рынке: его сравнительно легко выучить.

К сильным сторонам обучения JavaScript относят развитую экосистему: у него обширное комьюнити, всесторонняя поддержка, решение многих типовых задач можно найти в Google или получить быстрый ответ на форуме.

В качестве стартового языка JavaScript выбирают из-за простоты и хорошей документированности.

Сложность JavaScript в том, что для участия в коммерческой разработке знаний только самого языка программирования недостаточно. Потребуется выучить верстку, понимать принцип отправки и получения данных от сервера, а также выучить хотя бы пару популярных библиотек и фреймворков.

С чего начать изучать JavaScript

«Современному джуну нужно освоить большой массив данных на JavaScript. Во-первых, это фундаментальные основы языка программирования: циклы, переменные, ветвления, константы, типы, классы конструктора и так далее. Во-вторых, нужно знать верстку, хотя бы в общих чертах, и уметь применять ее принципы на практике.

Еще пригодится понимание модели событий JavaScript, объекта и модели документа DOM. Также нужно научиться применять один из популярных фреймворков. Например, React или Vue.

И еще важно научиться делать запросы AJAX и HTTP-запросы из браузера. В этом можно разбираться бесконечно. Но джуну достаточно знать хотя бы то, как загрузить и отправить данные с API, использовать авторизацию и параметры запросов. С этой базой, если вы понимаете, что делаете, уже можно найти работу».

Также всем желающим изучить JavaScript мы рекомендуем прочитать эти книги:

Дэвид Флэнаган « JavaScript. Подробное руководство »
Дуглас Крокфорд « Как устроен JavaScript »
Алексей Васильев « JavaScript в примерах и задачах ».

Кроме книг для изучения JavaScript можно читать тематические статьи на Хабре и смотреть обучающие курсы на YouTube. Советуем также пройти бесплатный курс по основам JavaScript на Code Basics. А для большего погружения — найдите свое комьюнити и обменивайтесь опытом с другими учащимися. И не забывайте как можно больше практиковаться и писать код.

Профессия «Фронтенд-разработчик»

Изучите востребованные JavaScript и TypeScript
Научитесь создавать пользовательские интерфейсы сайтов и приложений
Освойте самый популярный фреймворк JavaScript — React
Познакомьтесь с языками веб-разработки HTML и CSS

Почему JavaScript работает быстрее, чем С++?

Да, вы не ослышались. Глючный, тупой, тормознутый JavaScript работает быстрее, чем С++. Подождите тянуться к return userKarmaVote(), дайте мне возможность всё объяснить. Адвокат!

Есть три вида лжи

Есть такой проект под названием Benchmarks Game. Ребята написали программы (обход бинарных деревьев, n-body и т.д.) на всех популярных языках программирования и разработали методику измерения скорости и потребления памяти. Прежде чем читать дальше, просьба ознакомиться с методологией измерений.
Реализация каждого алгоритма подробно описана (например, nbody). Это open-source и если вы считаете, что какой-то алгоритм реализован не самым оптимальным способом, то можете предложить собственное решение.

Из всех интерпретируемых языков JavaScipt работает быстрее других. Он в пять раз быстрее, чем Python и Ruby (в том числе JRuby).

На сегодняшний день JavaScript — это самый быстрый интерпретируемый язык в мире.
Возвращаясь к C++. По алгоритму regexdna JavaScipt отрабатывает чуть быстрее, чем C++. При этом нагружает CPU в два раза меньше, хотя и потребляет в два раза больше памяти.
По другим алгоритмам JavaScript, естественно, отрабатывает медленнее C++, но учитывая что они изначально в разных весовых категориях (компилируемый язык со статической типизацией против интерпретируемого языка с динамической), разница не такая уж большая.

Почему JavaScript такой быстрый?

Интерпретаторы для Python/Ruby были написаны ограниченным числом людей. Эти люди, возможно, безумно талантливы, но на стадии разработки у них не было никакой конкуренции. Они конкурировали только с собой, со своими представлениями о скорости и качестве. Интерпретатор же для JS родился в конкурентной борьбе лучших умов мира. Mozilla разработала SpiderMonkey, Google разработал V8, Microsoft открыли Chakra. Все они работали в жесточайшей конкурентной борьбе.

Когда у команды NodeJS встал вопрос о выборе движка для JS, они просто посмотрели бенчмарки, увидели что V8 намного быстрее и выбрали его. Если завтра Chakra от Microsoft будет работать быстрее Google V8, то не будет никакой проблемы перейти на него.

Почему JavaScript такой медленный?

Как было сказано выше, JavaScript как язык — быстрый. Однако считается, что «нативное» предназначение JS — манипуляции с DOM. На самом деле это уже давно не так и JS успешно используется на сервере, в мобильных устройствах и даже в микроконтроллерах. Но речь не об этом. Речь о том, что когда вы с помощью JavaScript работаете с DOM, то тормозит не JS, а DOM. Есть много причин, почему DOM такой медленный, но я позволю себе сузить фокус только на одной причине. Проблема в самой спецификации HTML. В разделе 1.1.1 The DOM Structure Model есть следующий абзац:

…objects in the DOM are live; that is, changes to the underlying document structure are reflected in all relevant NodeList and NamedNodeMap objects…

Смысл в том, что объекты в дереве DOM — «живые». Это означает, что при любом изменении любой части DOM эти изменения отражаются в каждом объекте DOM.
Крупные кампании, такие как Flipboard, упорно боролись с лагами DOM. В итоге у них ничего не получилось и они смогли добиться 60 FPS только заменив DOM на Canvas. JavaScript никуда не делся, а лаги пропали. По этой же причине Netflix отказались от DOM на своих TV-приставках, а Реакту пришлось придумывать свой «виртуальный DOM».

Еще раз: JavaScript на клиенте не лагает. Лагает медленный DOM (точнее манипуляции с DOM). Не важно чем вы будете менять DOM — джава-скриптом или ассемблером. DOM все равно будет притормаживать. Именно из-за тормознутости DOM, JavaScript стал считаться медленным языком. Это историческая несправедливость и от нее давно пора избавиться.

WebAssembly

В этой связи у многих существуют неоправданные ожидания от прихода WebAssembly. Дескать, придет WebAssembly ~~порядок наведет~~ и мы наконец-то откажемся от «тормознутого» JS. Во-первых, даже после прихода WebAssembly работа с DOM останется за JavaScript. Да, какие-нибудь фреймворки (типа AngularJS) получат возможность перенести тяжелую логику на C/C++, но суммарный прирост от этого будет минимальным. Во-вторых, когда WebAssembly сможет напрямую манипулировать DOM’ом, минуя JS, прироста по скорости не будет, т.к. тормозит DOM, а не JS.

Хейт

Я понимаю, что скорость работы — не главный критерий оценки языка. Нужно учитывать потребление памяти, нагрузку на CPU и т.д. Я понимаю, что одно дело — скорость работы каких-то академических алгоритмов, а другое дело — скорость работы настоящего продакшн-приложения. Я понимаю, что кроме алгоритмов есть еще паттерны и подходы, и что ваш асинхронный ASP.NET может работать быстрее асинхронного NodeJS.

Однако JavaScript уже достаточно подвергся нападкам (заслуженным и незаслуженным) за свое «странное» поведение, за свое отношение к типам, к наследованию и т.д. Но вешать на него еще и ярлык тормознутости — это перебор. Остановитесь!

Зачем фронтендерам React, если есть JavaScript

Сайты на чистом JavaScript давно стали редкостью: обычно при разработке используют библиотеки и фреймворки. Одна из самых популярных библиотек — React. В этой статье мы познакомимся с её основными принципами и идеями. Мы расскажем, что из себя представляет React, какие у него преимущества в сравнении с другими инструментами и как работать с React-компонентами.

Зачем нужны реактивные фреймворки и библиотеки?

Современные сайты отличаются от тех, которыми мы пользовались раньше: они более динамичны. С их помощью можно покупать товары, общаться с друзьями или писать комментарии.

Изменилась и структура сайтов. Изначально они состояли из набора отдельных HTML-страниц. Сейчас они представляют собой один HTML-документ, внешний вид которого меняется динамически через JavaScript.

Такой подход получил название SPA — single-page application, или одностраничное приложение. SPA делает сайты полноценными приложениями, которые не перезагружаются между переходами по страницам. Чтобы выполнить переход, нужно полностью перерисовать контент документа с помощью JavaScript и полученных данных.

Хотя требования к интерактивности сайтов выросли, инструменты для её создания почти не изменились. Работа с DOM по-прежнему остаётся императивной, «из коробки», и выглядит примерно так:

Привет, Мир. Меня зовут .
 function setName(name) < const nameWrapper = document.querySelector(".js-name"); if (nameWrapper) < nameWrapper.textContent = name; >> setName("Вася");

Этот код может показаться неплохим, если нужно добавить имя пользователя в строку приветствия или создать слайдер. Но предположим, мы делаем SPA-приложение с такой корзиной:

И эту корзину нужно перерисовать в страницу оформления заказа:

В этом случае решение задачи «в лоб» будет невероятно трудоёмким. Придётся написать тысячи строк кода взаимодействия с DOM API — такой код будет сложно читать и поддерживать. Использование библиотеки наподобие jQuery лишь поменяет интерфейс взаимодействия с DOM, но не решит проблему.

Можно написать свою реализацию MV* паттерна и настроить связывание данных, построив свою систему рендеринга. Но такие решения сложно реализовать быстро и качественно, а новым членам команды разработки будет непросто разобраться в чужих паттернах.

Подобные сложности привели к созданию реактивных фреймворков и библиотек. Идея реактивности такова: вместо того, чтобы каждый раз вручную в коде в императивном виде менять интерфейс приложения, гораздо удобнее изначально в декларативном виде задать связь между данными и их отображением и в дальнейшем в коде менять только данные. Интерфейс будет перерисовываться автоматически под новые данные.

То есть реактивный подход подразумевает работу с данными, при изменении которых автоматически меняются и другие части программы, в том числе интерфейс. React стал одной из первых и самой популярной на начало 2022 года реактивной библиотекой для работы с интерфейсами.

�� Начните кодить на React

Научитесь собирать интерфейсы в экосистеме React с нуля и создавать интерактивные React-компоненты.

Что такое React?

React — это декларативная JavaScript-библиотека для создания пользовательских интерфейсов. Она позволяет собирать сложный UI из маленьких изолированных кусочков кода, называемых «компонентами».

React предоставляет два синтаксиса для создания компонентов: классовый и функциональный. Классовый используется редко, так как синтаксис классов часто излишен для описания компонентов. Поэтому в статье мы будем рассматривать функциональные компоненты.

Функциональный компонент в React — это JavaScript-функция, которая на входе получает объект с данными для отрисовки компонента — их называют props, а на выходе возвращает описание интерфейса, который нужно отобразить.

Пример с приветствием пользователя на React может выглядеть так:

import React from "react"; function HelloWorld (props) < return (Привет, Мир. Меня зовут ); > export default HelloWorld;

В этом коде легко разобраться, даже если вы не знаете синтаксиса React. Здесь в виде функции описан React-компонент HelloWorld. На входе он получает объект с данными, props, который содержит свойство name c именем пользователя. Функция возвращает специальный код, похожий на HTML-разметку. Подробнее о нём расскажем позже, а сейчас лишь важно понимать, что этот код работает. React действительно отобразит на странице DOM-дерево — оно будет соответствовать разметке, которую вернуло HelloWorld. Но в отличие от обычного HTML, мы смогли подставить в разметку данные из объекта props , тем самым шаблонизировав её.

Код на React выглядит легче и лаконичнее решения на чистом JS. Мы не описываем, как перерисовывать интерфейс. Вместо этого мы указываем, что нужно отобразить на месте компонента, и используем для этого синтаксис, похожий на HTML. Такой подход позволяет относительно легко решать и более сложные задачи. Например, перерисовать разметку страницы корзины и отобразить на её месте интерфейс страницы заказа.

Для своих перерисовок React использует Virtual DOM. Это позволяет обновлять только изменившиеся узлы DOM-дерева, а не перерисовывать всю страницу. Благодаря этому приложения не расходуют лишние ресурсы.

React решает проблемы фронтендеров при разработке интерфейсов динамичных сайтов и SPA-приложений. При использовании классической связки JavaScript и HTML перерисовка интерфейса сильно усложняется. React же не ограничивает возможности разработчика, в отличие от любых фреймворков.

Востребован ли React на рынке фронтенд-разработки? Сравнение с Angular и Vue

Проекты на чистом JavaScript стали экзотикой — чаще разработчики используют реактивные библиотеки и фреймворки: React, Vue или Angular. Трудно понять, какой фреймворк лучше и удобнее — разработчики постоянно спорят и не могут прийти к компромиссу.

На наш взгляд, современные библиотеки и фреймворки похожи друг на друга — каждый из них имеет свои преимущества и недостатки, но в целом они одинаково эффективны. Статьи про сравнение инструментов часто бывают необъективными, так как разработчики полагаются на личные предпочтения. Например, если команда целый год переписывала сайт с Vue на React, то её члены скажут, что React лучше, и наоборот. Поэтому не стоит тратить время на сравнение разных реактивных фреймворков и библиотек. Вместо этого лучше изучить как минимум один из них.

И всё же одно преимущество у React есть — React-разработчиков чаще нанимают. Вот сравнение количества вакансий по React, Angular и Vue на hh.ru:

Количество вакансий для фронтендеров с опытом работы 1-3 года

Компании ищут React-разработчиков в два раза чаще, чем разработчиков на Vue или Angular.

Если сравнивать количество загрузок npm-пакетов, то и здесь React превосходит фреймворки. По данным npm trends за последний год, среднее ежемесячное число загрузок пакета React — 11 млн, Angular и Vue — около 2,8 млн.

Хотя формально их вообще нельзя сравнивать, так как React — библиотека, а Vue и Angular — фреймворки. Однако из-за различных переходных вариаций, таких как «прогрессивный фреймворк», и других особенностей различий между библиотеками и фреймворками во фронтенде почти нет.

Типовые задачи React-разработчика

Типовые задачи разработчика состоят в написании React-компонентов. Далее из таких компонентов строятся страницы сайта.

Реактивные фреймворки — это программирование на основе работы с данными, поэтому важно знать тип данных, который приходит в компоненты. Так как JavaScript не позволяет явно описывать типы данных, React-разработчики обычно используют в проектах TypeScript.

React отвечает только за отображение интерфейса. Поэтому вокруг него есть целая экосистема инструментов, решающих остальные задачи фронтенд-разработки:

Управление состоянием — библиотеки для работы с глобальными данными приложения, которые не относятся к конкретному компоненту, а нужны во многих частях сайта. Среди популярных инструментов для управления состоянием можно выделить Redux и Mobx.

Роутинг. SPA подразумевает переход между страницами сайта без дополнительных запросов к серверу. Поэтому задачами роутинга, соответствия страниц определённым URL, тоже занимаются фронтендеры. Для таких задач существует ряд популярных библиотек, в частности, React Router.

Серверный рендеринг. Одна из проблем SPA — многие поисковики ожидают HTML, а не JavaScript. Поэтому важно отдавать на запросы поисковиков не пустой HTML-файл, на котором JavaScript «рисует» интерфейс, а готовую HTML-разметку. Чтобы её генерировать из компонентов, разработан фреймворк Next.js.

Создание UI-элементов. Типовые UI-элементы обычно не пишут с нуля — для них используют готовые UI-библиотеки: MUI, Ant Design и многие другие.

Стилизация. Для стилизации в React часто используют не обычный CSS, а подход CSS-in-JS. Он позволяет описывать стили прямо в JavaScript. Одна из самых популярных реализаций подхода CSS-in-JS — библиотека styled-components.

Это далеко не полный список задач и инструментов, с которыми работает React-разработчик в повседневной жизни.

Как работать с React-компонентами?

Рассмотрим подробнее синтаксис компонентов. Как мы уже говорили, React-компонент — это JavaScript-функция, которая на входе получает объект с данными для отрисовки компонента, а на выходе возвращает React-элемент.

React-элемент — это JavaScript-объект, описывающий узел DOM-дерева. Он имеет специальный формат, который React умеет обрабатывать и отображать на странице. Для создания таких объектов библиотека React предоставляет метод React.createElement .

Чтобы создать на странице разметку

Тяжело читать React.createElement.

, можно написать React-компонент:

import React from "react"; function HelloReact() < // не нужно думать, что это такое, дальше мы будем использовать JSX return React.createElement( "p", <>, "Тяжело читать ", React.createElement("b", <>, "React.createElement"), ". " ); >

Вызовы React.createElement не выглядят интуитивно понятными. Глядя на код, сложно понять, что будет выведено на страницу. Поэтому React.createElement обычно напрямую не применяется, а используется специальный синтаксис JSX.

Что такое JSX?

JSX — расширение JavaScript для описания интерфейса прямо в JS с помощью синтаксиса, похожего на HTML. С использованием JSX пример будет выглядеть так:

import React from "react"; function HelloReact() < return Тяжело читать React.createElement.
 >

С JSX код стал понятнее. Сразу видно, какой фрагмент DOM-дерева описывает компонент.

JSX позволяет шаблонизировать разметку, подставляя в неё данные, вычисленные из JavaScript-выражений. Для этого используется синтаксис фигурных скобок. Если переписать пример из начала статьи на React, то он может выглядеть так:

import React from "react"; function HelloWorld (props) < return (Привет, Мир. Меня зовут ); > export default HelloWorld;

Здесь компонент HelloWorld получает в объекте props имя пользователя name и на основе этих данных возвращает нужную разметку: Привет, Мир. Меня зовут . Благодаря синтаксису фигурных скобок значение из переменной name подставляется в JSX.

Однако браузер ничего не знает про JSX и не умеет его интерпретировать. При использовании JSX нужно настроить сборку проекта так, чтобы JSX автоматически трансформировался в JavaScript-объекты и в браузер попадал чистый JS. Для этого есть Babel-плагины и пресеты, а также проекты наподобие CreateReactApp. В статье мы используем онлайн IDE CodeSandbox, которая предоставляет готовый шаблон для React-проектов.

Теперь посмотрим, как заставить React вывести на экран JSX-разметку. Для этого React предоставляет метод ReactDOM.render . Первым параметром в него передаётся JSX-разметка. Вторым — узел DOM-дерева, в который нужно вставить кусочек интерфейса.

Чтобы вывести компонент HelloWorld в DOM-узел с id root , нужно написать:

import ReactDOM from "react-dom"; import HelloWorld from "./hello-world"; const rootElement = document.getElementById("root"); ReactDOM.render(HelloWorld() , rootElement);

Вызов HelloWorld c объектом вернёт нужную JSX-разметку, а rootElement хранит ссылку на DOM-элемент с id root . В результате вызов ReactDOM.render(HelloWorld() , rootElement) вставит полученный из компонента интерфейс в нужный DOM-узел.

Вручную, как функции, компоненты обычно не вызывают. Дело в том, что в JSX можно вставлять компоненты как обычные HTML-теги, передавая данные через атрибуты. При отрисовке на месте компонента в JSX будет выведена та разметка, которую вернёт компонент.

Имя компонента в JSX должно начинаться с большой буквы, иначе JSX будет идентифицировать его как обычный HTML-тег.

Таким образом, вместо ReactDOM.render(HelloWorld() , rootElement); пишут: ReactDOM.render( , rootElement); .

Композиция компонентов и хуки

Возможность вставлять в JSX не только HTML-теги, но и свои компоненты — один из важнейших приёмов в React. Страницы сайта обычно бывают намного сложнее, чем пример Hello World : они состоят из сотен или даже тысяч HTML-элементов. Описывать такую страницу в одном модуле или компоненте — плохая идея. Код превратится в огромную простыню. Поэтому страницы разбивают на более мелкие кусочки интерфейса, и каждый из них реализуют в виде отдельного компонента. Этот приём в React называют композицией компонентов.

Тот же самый пример с HelloWorld можно представить в виде композиции двух маленьких компонентов:

// компонент Name import React from "react"; function Name(props) < return ; > export default Name; // компонент HelloWorld import React from "react"; import Name from "./name"; function HelloWorld(props) < return ( Привет, Мир. Меня зовут />
 ); > export default HelloWorld;

Теперь за отрисовку имени пользователя отвечает компонент Name. Его можно использовать не только в HelloWorld , но и любой другой части интерфейса, где необходимо вывести имя пользователя.

Для более сложных страниц композиция может быть больше, например:

Таким образом, интерфейс в React представляет собой дерево компонентов, каждый из которых отвечает за свой кусочек интерфейса. Так как данные передаются только через props сверху вниз, от родительских компонентов к дочерним, это образует однонаправленный поток данных. Работа с ними становится более предсказуемой и понятной.

Создаваемые с помощью React пользовательские интерфейсы не статичны. Мы можем их перерисовать в ответ на действия пользователя. Для этого React предоставляет React-хуки.

Хуки — это функции, которые позволяют изменить стандартное поведение системы собственным кодом. При этом интерфейс функции ограничивает эти изменения безопасными для системы пределами.

В случае с React хуки помогают управлять жизненным циклом компонента, позволяя в нужный момент вызвать, например, его перерисовку.

В результате счётчик на React может выглядеть так:

import React, < useState >from "react"; export default function Counter(< initValue >) < const [value, setValue] = useState(initValue || 1); return (     
 ); >

useState — специальный React-хук для хранения состояния компонента. Когда состояние меняется, компонент перерисовывается.

При вызове useState возвращает массив, первый элемент которого — значение состояния. Во втором элементе хранится функция-сеттер, с помощью которой можно менять значение состояния. Для кнопок передан props onClick . В него записана функция, которая вызывается при нажатии на кнопку — setValue с новым значением состояния. Это вызывает перерисовку, и на экране отображается актуальное значение value .

useState — только один из множества доступных хуков. Более того, при необходимости разработчик может писать свои кастомные хуки.

Итак, какие у React преимущества в сравнении с нативным JavaScript:

React предоставляет декларативное описание интерфейса — с ним удобнее работать, чем с вереницей императивных инструкций DOM API.
React сам решает, какие узлы DOM-дерева в какой момент обновлять. Он не выполняет лишних операций, поэтому код на React быстрее, чем большинство наивных реализаций на чистом JavaScript.
У React отличная документация. Самописные решения для реализации дата биндинга обычно плохо задокументированы или не задокументированы вовсе.
Благодаря JSX в одном компоненте мы видим и логику, и разметку, с которой должна работать данная логика. Обычно они неразрывно связаны, и видеть их рядом намного удобнее, чем отдельно хранить HTML и JavaScript.
Разбиение кода на компоненты позволяет переиспользовать код.

Итоги

React востребован в мире современной фронтенд-разработки: многие разработчики по умолчанию используют его для написания интерфейсов. Такая популярность привела к тому, что некоторые джуны начинают изучать React, не зная базовый JavaScript. Это грубая ошибка. React — всего лишь JS-библиотека, и чтобы её освоить, нужно хорошо знать JavaScript.

При изучении React уделите больше времени функциональному синтаксису написания компонентов — он используется чаще. На классовых компонентах, как правило, осталось написанным только «легаси». Также советуем освоить TypeScript, ведь его применяют в большинстве проектов на React.

У React есть своя философия, приёмы и ограничения, которые нужно соблюдать, чтобы писать качественный код. Поэтому важно не просто выучить синтаксис, но и общаться с более опытными коллегами, показывать им свой код. Только так вы сможете стать хорошим React-разработчиком.

Чтобы было проще выбрать:

Ключевые навыки фронтендеров в 2022
Как стать JavaScript-разработчиком в 2022
6 книг по JavaScript для начинающих

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

JavaScript. Больше делать упор на нейтив или на библиотеки?

Если книжка НЕ про ES6/2015, не читайте. Все-равно, что в 2016 учить Perl. Потратьте день-два на официальном сайте TypeScript.
Тут Ваш вопрос выглядит как «что учить: C# или сразу начинать с EF?»
Конечно, Вы должны выучить ES6/TypeScript, чтобы минимально элементарно понимать, что означают примеры кода, но работать на чистом JS Вам не дадут. Тут вопрос не в Вас, а в тех лиде, который должен быть сумашедшим, чтобы загрузить команду изобретением велосипедов.
У Вас, по-хорошему, есть 4 варианта: Angular 2, React (со всем зверинцем), Ionic 2 или React native.
PS Из всего jQuery, что Вам ниже писали, нужны будут только селекторы и изменение стилей. Совсем без него глупо, но и роль его сейчас не выше, чем у какого-то moments
PSS Да, и gulp/Webpack — обязательно. С node до кучи (имеется в виду npm). Примите как данность и портфолио без них не заводите.

Тут вопрос не в Вас, а в тех лиде, который должен быть сумашедшим, чтобы загрузить команду изобретением велосипедов.

если проект не унылый ынтырпайз, или еще какоето шаблонное формошлепство то весьма велика вероятность того что может быть чтото другое. а иногда даже в формошлепстве есть смысл использовать свое — вариации миллион, но да, чисто исходя из вероятности, попасть на такой проект большая редкость

Только не пишите что нужно и то и то

Нужно и то и то.

На что больше делать упор?

только чистый скрипт? Или лучше плагины?

Зависит от вашей конечной цели. Какие именно работы хотите видеть в своем портфолио? Какие плагины использовать собрались? Куда устраиваться собрались?

заново перечитывать Крокфорда

Обычно лучше что-то написать, а потом только перечитывать. Так хоть будете лучше понимать на чем внимание заострять / в чем хуже разобрались.

Пока просто есть свой проект, реальный, который полностью хочу сам написать и запустить, ну кроме бэк энда тут нужна будет помощ. Плюс думал над тем чтоб создать не большую библиотеку плагинов, не для того чтоб их кто тоо использовал, других полно, а чтоб было видно что я могу. В верстке я не силен, с творчеством не очень, да и не вижу смысла выкладывать лендинги и визитки, какие то не большие сайты, этого море там и без меня.
А насчет работы, то сейчас готов браться за любую и не потому что мне деньги нужны(пока могу себе позволить об этом не думать), а только ради опыта.

Вы опять очень абстрактно все говорите. Как вам люди могут что-то конкретно подсказать? Мне понятно только:

не вижу смысла выкладывать лендинги и визитки

Хотя и это просто стереотип. Не все клевые сайты должны быть со сложной архитектурой и не все только за такие готовы платить, можете сюда заглянуть: www.awwwards.com/. h/?categories=programming
Верстка это далеко не 20 блоков с картинками в кружечках раскидать по странице. На деле нужен и JS (на более высоком уровне, чем просто знания фреймворка, который все особенности языка и браузеров скрывает), и соображалка, и креативность, даже в тех ситуациях, когда супер-сложная логика с переходами в 1000 разных состояний не нужна.

А насчет работы, то сейчас готов браться за любую

Чем конкретней спросите, тем конкретней вам ответят. Если хотите любую работу, то можете изучать любой язык, любые технологии, любые библиотеки. Вам тут собственно и советуют кто-что и все по делу.

Podoprigora Alexandr front-end developer в freelace 12.12.2016 15:34

Я бы сосредоточился на решении конкретных задач, для этого лучше использовать Frameworks выбирайте где больше комьюнити и что быстро развивается.

Олександр Шпак Oarsman в Self Employed 13.12.2016 00:55

Буде черговий сіньор фреймворк кодер?

Пишучи на джс фреймворку є хоч можливість поменше бачити «особливості» джаваскрипту. Це як і з пхп — чим менше ти нативно пишеш, тим більш стабільна в тебе психіка.

Gennady Dogaev full-stack web developer (freelance) 12.12.2016 14:28

Все работы нужны пока только для портфолио

Если хочешь похвастать перед бородатыми синьорами, которые еще Netscape Navigator видели, то всё на чистом JS. А если для заказчиков, чтобы потом за деньги работать — то пиши как удобнее и быстрее (очевидно это будет куча библиотек и плагинов), но чтобы выглядело нормально.

Конечно, нужно знать основы JS и уметь при необходимости найти нужную информацию на MDN. В то же время, нужно также уметь интегрировать готовые решения. Оба вида опыта одинаково важны, нельзя зацикливаться ни на нейтиве, ни на готовых плагинах. Мне кажется что разработчик, и особенно если речь о фронтенде, должен уметь определить где проще использовать готовое, а где написать своё, и от этого отталкиваться.

Олександр Шпак Oarsman в Self Employed 12.12.2016 12:09

Треба прокачувати алгоритмику в першу чергу. Рішення задач починається не з того, що дупа саджається за комп та починають пустунчикові пальці по клаві щось там тицкати. Задачу треба спочатку прокрутити в голові та знайти ефективне рішення. А потім ще пару запасних. От тоді можна вже обирати інструмент: нейтів або бібліотеку.

«нейтив» принято называть pure js.
Для справки.

Yaroslav Ulanovych Scala Developer в Remote 10.12.2016 12:15

Был введен в заблуждение, цитирую:
«a fast, lightweight, cross-platform framework
for building».
Где тут чистый, незамутненный JS я не вижу.

Євген Козлов Front-end developer в SoftServe 10.12.2016 12:36

потому что это такой стеб «большинство штук не требуют сторонних либ, а требуют прямых рук»

Євген Козлов Front-end developer в SoftServe 10.12.2016 00:29

что значит «нейтив» в данном контексте?
язык прост синтаксисом, даже с оглядкой на ES6. концептуально сложные штуки типа промисов и генераторов не обязательно снаскоку штурмовать, а больше ничего запутанного там и нет, раз с замыканиями разобрался.

fullstack, frontend или какой-то phonegap?
в зависимости от направления, надо тянуть что-то смежное.
сам по себе «нейтив джаваскрипт» — как абстрактный конь в вакууме, разве что лабораторки делать по выводу в консоль корней квадратного уравнения да либы по вычислению/моделированию.

Олег Дроздов Front-end TL в HealthJoy 09.12.2016 23:25

Ежели ты будешь знать нативный js на хорошем уровне, то выучить любой фреймворк или либу не составит никакого труда. Это скорее вопрос времени и усилий, но понять тонкости этих технологий без знания языка будет очень сложно

Andrii Muzychuk Salesforce Engineer в InCountry 09.12.2016 22:15

В первую очередь учи то, чем хочешь сам заниматься, а на оставшееся время — то, что спрашивают на собеседовании.

Нейтів, нейтів і ще раз нейтів.
А після уже можна jQuery, React/angular.

Mikhail Ulyanchenko Software Engineer 10.12.2016 12:19

Сегодня 10.12.2016, зачем учить jQuery?

А тут можно поподробней? Разве это не самая используемая библиотека?

Да, самая популярная. Но прогноз негативный:
jQuery vs Angular vs React

Думаю этот прогноз несколько обманчив.

Не нужно забывать что он основан на статистике поисковых запросов.
То есть — если у людей нет вопросов по jQuery, а по ангуляру тьма, то думаю очевидно что тренд будет в пользу ангуляра.

Массовостью же применения jQuery обязан серверному рендерингу страниц. И пока разработка дешевле с серверным рендерингом, чем SPA, jQuery и его аналоги остануться более массовыми чем ангуляр с реактом.

Другое дело — уровень зарплат. Собственно серверный рендеринг потому дешевле, что фронедщики на ангуляре дороже

если бы гогл не начал всех принуждать делать верстку под мобильные телефоны то ни ангуляр ни рест особо никем бы и не юзались. я вот не пойму как рестовые сайты индескируются гоглом ? там же все данные подтягиваются через аджакс и робот может увидеть только х1 или х2 какие нибудь

ниже — слухи, глубоко не копал.

я вот не пойму как рестовые сайты индескируются гоглом ?

насколько знаю — никак.

да, читывал, гугл индексация стала наконец запускать сприпты на сайтах. но — запросы — игнорирует. говорят что иногда делает, но с ограничением ожидания по времени. или сама работа скриптов — ограничена по времени — еще такое говорят.

робот может увидеть только х1 или х2 какие нибудь

интересно что гугловцы ругаются на подсовывание сайтов для ботов. и требуют чтобы сайт был тем же что показывается пользователям. поэтому народ все же генерит первый показ на сервере.

как-то встретил даже такой подход, на Backbone — серверный рендеринг, на фронте запускается «декомпилер», который с присланного html нарезает шаблоны для Backbone. и дальше уже SPA поведение.

React в этом плане грамотней чем Angular — он из коробки, умеет генерить html что на сервере, на фронте.

но в целом да, ситуация с рестовыми сайтами мне тоже не понятна. как-то спросил одного докладчика на js-day в перерыве. на что он — а-а-а, это на наверное для электронных магазинов нужно? не занимаюсь сайтиками давно. ну и смотрите — кабинеты пользователей все равно не нужно индексировать. а остальное, для незалогиненных — ну пусть себе рендерится на сервере.

TypeScript vs. JavaScript: Which is the better pick?

About JavaScript

About TypeScript

TypeScript vs JavaScript: Which one to choose?

JavaScript

TypeScript

Detailed comparison between TypeScript vs. JavaScript

Community

Easy Learning

Maintainability of code

Facilities for debugging

Data biding

Conclusion

TypeScript vs. JavaScript: Your Go-to Guide

By Daniele Monesi

Expertise

Years of Experience

The Relationship Between TypeScript and JavaScript

TypeScript vs. JavaScript Examples

TypeScript vs. JavaScript From 30,000 Feet: Scalability Challenges

Validation

Refactoring

Documentation

Advantages of TypeScript vs. JavaScript

Advanced Code/Refactoring Suggestions

Interface Support

ES6 Modules—Anywhere

ES6 Classes—Anywhere

Async/Await Functionality—Anywhere

Support for Private Class Fields—Anywhere

Disadvantages of TypeScript vs. JavaScript

Transpilation: Potential for Workflow Incompatibility

Type System Works Only Until Transpile Time

Combining TypeScript and JavaScript

TypeScript vs. JavaScript: A Question of Streamlining and Scalability

Further Reading on the Toptal Blog:

Understanding the basics

Is TypeScript better than JavaScript?

Why is TypeScript used instead of JavaScript?

Is TypeScript front-end or back-end?

Is TypeScript’s performance better than JavaScript’s?

Что быстрее нативный javascript или typescript

Что быстрее нативный javascript или typescript

Язык программирования JavaScript: где его используют и почему он популярен

Где используют JavaScript

Фронтенд веб-приложений

Бэкенд веб-приложений

Читайте также:

Расширения для браузера

Мобильные приложения

Игры

Машинное обучение

Читайте также:

Базы данных

Интернет вещей

Популярность JavaScript

Перспективы JavaScript

Сколько зарабатывают программисты на JavaScript

Что означает скрипт в названии JavaScript

Чем JavaScript отличается Java

Читайте также:

В чем особенности JavaScript

Интеграция с HTML и CSS

Мультипарадигменность

Динамическая типизация

Преимущества JavaScript

Недостатки JavaScript

Пишем первую программу на JavaScript

Насколько сложно выучить JavaScript

С чего начать изучать JavaScript

Почему JavaScript работает быстрее, чем С++?

Есть три вида лжи

Почему JavaScript такой быстрый?

Почему JavaScript такой медленный?

WebAssembly

Хейт

Зачем фронтендерам React, если есть JavaScript

Зачем нужны реактивные фреймворки и библиотеки?

Привет, Мир. Меня зовут .

Что такое React?