Type script = javascript (alomst) done right

Mar 29, 2013Download as pptx, pdf

0 likes1,955 views

This document introduces TypeScript as a superset of JavaScript that adds optional type checking, classes, interfaces and other features. It was developed by Anders Hejlsberg at Microsoft to address issues with JavaScript as applications grow larger and more complex. Key features discussed include type annotations, type inference, modules, classes, and interfaces. The document argues that TypeScript can help with large JavaScript projects while allowing existing JavaScript code and skills to still be used.

TypeScript = JavaScript (almost)
done right
Maurice de Beijer

Who am I

 Maurice de Beijer
 The Problem Solver
 Microsoft MVP since 2005
 DevelopMentor instructor
 Twitter: @mauricedb
 Blog: http://msmvps.com/blogs/theproblemsolver/
 Web: http://www.HTML5Support.nl
 E-mail: Maurice.de.Beijer@gmail.com

Agenda

 What is TypeScript?
 Why do we need TypeScript?
 What is wrong with JavaScript?
 TypeScript features
 Type annotations
 Type inference
 Modules
 Classes

What is TypeScript?

 An open source programming language developed at Microsoft
 By Anders Hejlsberg, lead architect of C#
 A super set of JavaScript
 All JavaScript is valid TypeScript
 Adds optional type checking, classes, interfaces and more
 Compiles to “normal” JavaScript
 Either ECMAScript 5 or ECMAScipt 3

Why do we need TypeScript?

 JavaScript was designed for small scripts
 These days JavaScript applications get bigger and more complex
 Gmail is reported to have 443,000 lines of JavaScript in 2010
 This trend will continue
 Single Page Applications in the browser
 Node.js on the server

Douglas Crockford on TypeScript

Microsoft's TypeScript may be the best of the many JavaScript front ends. It seems to
generate the most attractive code. And I think it should take pressure off of the
ECMAScript Standard for new features like type declarations and classes. Anders has
shown that these can be provided nicely by a preprocessor, so there is no need to change
the underlying language.

I think that JavaScript's loose typing is one of its best features and that type checking is
way overrated. TypeScript adds sweetness, but at a price. It is not a price I am willing to
pay.

Things TypeScript adds to JavaScript

 Type annotations
 Type inference
 Modules
 Classes
 Interfaces

 Based on the ECMAScript 6 proposed standard

TypeScript type definitions

 The DOM and standard JavaScript types are provided

TypeScript is still JavaScript

 Not all JavaScript problems are solved by TypeScript
 Some older browsers support ECMAScript 3 (December 1999)
 Some older browsers have non standard DOM/CSS implementations
 jQuery remains an extremely useful library

Conclusion

 TypeScript is not perfect
 But it helps a lot
 You are not forced to use a new language
 Leverage existing JavaScript skills en libraries

 Consider it for your next “large“ JavaScript project
 After all the risk is small

TypeScript is a statically typed superset of JavaScript that enhances productivity by enabling features like object-oriented programming and support for ES2015. Installation is straightforward using npm, and it includes benefits like type checking and improved code understanding. Various developers praise TypeScript for its tooling support, which simplifies navigation and bug detection in large codebases.

TypeScriptSaray Chak

JavaScript Roadmap III - ECMAScriptAswin Barath

The document provides an overview of JavaScript topics including ECMAScript, JavaScript basics, DOM manipulation, history, and announcements. It introduces JavaScript and lists some of its uses like building user interfaces, APIs, mobile and desktop apps. It also summarizes new features in ECMAScript 6 and provides links to resources like a Discord community, Hackerrank challenges, and the Codecademy JU community.

TypeScript PresentationPatrick John Pacaña

Introduction to TypeScriptNexThoughts Technologies

TypeScript is a superset of JavaScript that adds optional static typing and class-based object-oriented programming. It adds additional features like interfaces and modules to JavaScript to allow code to scale. The document provides an introduction to TypeScript, explaining what it is, why to use it, its basic types, annotations, functions, interfaces, classes, generics, modules, and compiling. It also provides references for further reading.

Javascripts. ppttRaviShankarSinghal

Anyone Can Code: JavaScript - 6/24/2014Joseph Mainwaring

The document details the journey and expertise of Joe Mainwaring in JavaScript development, highlighting his specialization in building applications using Node.js, Angular.js, and PhoneGap. It traces the history of JavaScript from its creation in the mid-1990s to its evolution and impact on web technologies, including the release of various standards and libraries. Additionally, it provides resources for learning JavaScript, including official documentation, websites, newsletters, and premium content options.

React web developmentRully Ramanda

This document provides an overview of React including what it is, who uses it, its core concepts, and why one should use React. React is a library for building user interfaces that uses a component-based approach and virtual DOM for declarative programming. It allows components to be written once and used on the web, mobile, and beyond. Core concepts include components, virtual DOM, and unidirectional data flow. Benefits of React include the ability to write code once and deploy anywhere, fast rendering with virtual DOM, and the growing demand for React skills.

TypeScriptJon Vallet

TypeScript is a superset of JavaScript that adds optional static typing and type inference. It transpiles to JavaScript for browser compatibility while allowing for better autocomplete, refactoring, documentation and catching errors during development. TypeScript scales to large code bases and is adopted due to its open source licensing, Microsoft backing and built-in support in IDEs like WebStorm and Visual Studio Code. Tutorials provide guidance on migration and demonstrate TypeScript through code examples in a travel cloud project.

Frameworks in JavaScriptHaim Michael

AngularJS Vineeth Nair

AngularJS is an open-source JavaScript framework maintained by Google that was developed in 2009. It allows for the creation of browser-based applications with MVC functionality using client-side JavaScript. AngularJS aims to simplify development by allowing HTML elements to declaratively specify their logic and functions, reducing the need for JavaScript code. Key features include two-way data binding, directives to add new HTML elements and attributes, filters, and controllers to manage the view and application scope.

Web topic 21 pass info via javascriptCK Yang

JavaScript Jump StartHaim Michael

Html & cssPavitraBhagat

The document provides an agenda for a workshop on learning HTML and CSS. The workshop will cover the basics of HTML semantics and structure, an introduction to CSS including selectors and linking CSS to HTML. Attendees will learn through hands-on examples and have the opportunity to join the community through the organizers' Discord server and WhatsApp group. The workshop aims to teach front-end web development fundamentals.

There is something about JavaScript - Choose Forum 2014jbandi

JavascriptEkansh Purwar

JavaScript is a scripting language used for HTML web pages. It is loosely based on Java and built into major browsers. JavaScript code is placed within <script> tags in the HTML and can be included anywhere but is typically in the <body>. A basic "Hello World" example writes that text to the document. JavaScript is case sensitive, uses semicolons but they are optional when statements are on separate lines. Variables are declared with var, if/else statements control execution. Examples determine if a year is a leap year or check a password.

Java scriptfahhad123

JavaScript is a popular scripting language that works in major browsers and allows users to add interactivity to HTML pages without needing a license. As a scripting language, JavaScript can read and write HTML elements, validate data, and provide HTML designers a programming tool. While similar in name, JavaScript and Java are completely different languages, with Java being more complex and powerful.

Node js crash course session 1Abdul Rahman Masri Attal

This document provides an introduction and overview of Node.js. It discusses that Node.js is a JavaScript runtime environment that uses Google Chrome's V8 engine, allowing it to be very performant. It provides a brief history of Node.js and describes how Node.js handles requests asynchronously in a non-blocking way. The document also outlines some common uses of Node.js, describes different module types, and provides an example of creating an HTTP server. It introduces NPM for installing third-party packages and modules and concludes by mentioning Express.js as a popular web framework.

Front-end Testing (manual, automated, you name it) - Erich Jagomägis - Develo...MobileMonday Estonia

This document discusses different types of frontend testing, including manual vs automated testing. Manual testing has advantages like low costs and understanding user experience, but is repetitive and tests cannot be reused. Automated testing is more efficient long-term as tests can be run by anyone and retesting is easy, but requires upfront work. Unit testing tests individual functions separately, while end-to-end testing simulates user workflows in a browser. Popular frameworks for frontend testing include Jasmine for unit tests, Selenium for end-to-end tests, and Protractor for testing Angular apps.

Css,javascript,php,mysqlvurimi prasad

CSS (Cascading Style Sheets) allows you to define how HTML elements are displayed. Styles are saved in external .css files so that the appearance and layout of all pages on a website can be changed by editing just one file. JavaScript adds interactivity to HTML pages and is embedded directly into web pages. It is a lightweight programming language that is interpreted as pages load rather than needing compilation. PHP is a server-side scripting language that is widely used and efficient. It allows for server-side validation and dynamic front-end display. PHP scripts are executed on the server and support many database types.

HTML5 Jump StartHaim Michael

WordPress Jump StartHaim Michael

The document provides an overview of essential components for utilizing WordPress, covering topics like the World Wide Web, domain name system, hosting services, and the WordPress project itself. It details the functionality of WordPress for creating websites and blogs, including the use of themes and plugins for customization. Additionally, it highlights the significance of open source software in development and offers resources for further learning.

Type scriptsrinivaskapa1

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional static types, classes, and interfaces to JavaScript to help catch errors. TypeScript is developed by Microsoft and is often used for large-scale JavaScript applications. Some key benefits of TypeScript include compilation to catch errors early, strong static typing for IntelliSense and refactoring, and support for modern JavaScript features while allowing for backwards compatibility.

Type script vs javascript come face to face in battlegroundKaty Slemon

The document compares TypeScript and JavaScript, highlighting their differences and usage. JavaScript is a widely-used, flexible scripting language suitable for simpler projects, while TypeScript is an extension of JavaScript designed for large applications, featuring static typing and enhanced development tools. The choice between the two depends on project complexity, with TypeScript being ideal for larger codebases and JavaScript for smaller, more flexible needs.

TypeScript VS JavaScript.pptxAlbiorix Technology

The document compares TypeScript and JavaScript, highlighting JavaScript as a well-established language for web development, while TypeScript is presented as a superset that offers additional features like static typing and code compilation. It outlines their uses, differences, pros and cons, and suitability for various project sizes, stating that JavaScript is better for smaller projects and TypeScript for larger, more complex applications. The document concludes that TypeScript may help developers manage code complexity and enhance error detection.

Introducing TypeScriptMicrosoft Developer Network (MSDN) - Belgium and Luxembourg

TypeScript is a typed superset of JavaScript that adds optional static types, classes, and modules to enable scalable application development while still allowing code to run in any browser or environment. It provides static typing for JavaScript code and libraries while compiling to plain JavaScript, allowing developers to gradually introduce types into existing JavaScript projects. TypeScript aims to address the challenges of large scale JavaScript development through static typing as well as features like classes and modules that align with emerging ECMAScript standards.

An Introduction to TypeScript: Definition, History, and Key FeaturesMichael Coplin

TypeScript is a strongly typed, object-oriented programming language that extends JavaScript, developed by Microsoft, with its first public version released in 2012. It offers features such as real-time error feedback, better code organization through OOP principles, and the ability to use existing JavaScript libraries. While not universally adopted due to IDE limitations, TypeScript's growing developer community continues to enhance its functionality with new versions.

What is TypeScript? It's Definition, History And FeaturesHarryParker32

TypeScript is a strongly typed, object-oriented programming language developed by Microsoft as a superset of JavaScript, allowing for enhanced features and easier integration into JavaScript projects. Created in 2010 and publicly released in 2012, TypeScript aids in real-time error detection and offers object-oriented programming features. While still evolving, it aims to simplify coding processes and improve code organization, making it preferable over JavaScript for many developers.

Typescript for the programmers who like javascriptAndrei Sebastian Cîmpean

TypeScript is an open-source, typed superset of JavaScript that transpiles to plain JavaScript, providing features like classes, modules, and interfaces. It helps with compile-time and runtime error checking, better auto-completion, and integration with third-party libraries through ambient definitions. Getting started with TypeScript is straightforward, with npm installation and transpilation options, although transitioning to TypeScript from JavaScript can present challenges.

Type scriptMallikarjuna G D

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional static types, classes, and interfaces to JavaScript to help catch errors. TypeScript supports object-oriented programming concepts like classes, interfaces, inheritance, and modules. It is compatible with JavaScript and can reuse existing JavaScript code and libraries. The TypeScript compiler checks for errors and compiles TypeScript code into JavaScript that can run on any browser, device, or operating system that supports JavaScript.

More Related Content

What's hot (14)

TypeScriptJon Vallet

Frameworks in JavaScriptHaim Michael

AngularJS Vineeth Nair

Web topic 21 pass info via javascriptCK Yang

JavaScript Jump StartHaim Michael

Html & cssPavitraBhagat

There is something about JavaScript - Choose Forum 2014jbandi

JavascriptEkansh Purwar

Java scriptfahhad123

Node js crash course session 1Abdul Rahman Masri Attal

Front-end Testing (manual, automated, you name it) - Erich Jagomägis - Develo...MobileMonday Estonia

Css,javascript,php,mysqlvurimi prasad

HTML5 Jump StartHaim Michael

WordPress Jump StartHaim Michael

TypeScriptJon Vallet

Frameworks in JavaScriptHaim Michael

AngularJS Vineeth Nair

Web topic 21 pass info via javascriptCK Yang

JavaScript Jump StartHaim Michael

Html & cssPavitraBhagat

There is something about JavaScript - Choose Forum 2014jbandi

JavascriptEkansh Purwar

Java scriptfahhad123

Node js crash course session 1Abdul Rahman Masri Attal

Front-end Testing (manual, automated, you name it) - Erich Jagomägis - Develo...MobileMonday Estonia

Css,javascript,php,mysqlvurimi prasad

HTML5 Jump StartHaim Michael

WordPress Jump StartHaim Michael

Similar to Type script = javascript (alomst) done right (20)

Type scriptsrinivaskapa1

Type script vs javascript come face to face in battlegroundKaty Slemon

TypeScript VS JavaScript.pptxAlbiorix Technology

Introducing TypeScriptMicrosoft Developer Network (MSDN) - Belgium and Luxembourg

An Introduction to TypeScript: Definition, History, and Key FeaturesMichael Coplin

What is TypeScript? It's Definition, History And FeaturesHarryParker32

Typescript for the programmers who like javascriptAndrei Sebastian Cîmpean

Type scriptMallikarjuna G D

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional static types, classes, and interfaces to JavaScript to help catch errors. TypeScript supports object-oriented programming concepts like classes, interfaces, inheritance, and modules. It is compatible with JavaScript and can reuse existing JavaScript code and libraries. The TypeScript compiler checks for errors and compiles TypeScript code into JavaScript that can run on any browser, device, or operating system that supports JavaScript.

Typescript overviewThanvilahari

TypeScript is a scripting language developed by Microsoft, designed as a strict superset of JavaScript for large application development, providing optional typing and modular features. It simplifies code readability and debugging, differentiating itself from JavaScript with its need for compilation and support for advanced features like interfaces and generics. Companies such as Microsoft, Adobe, and Slack utilize TypeScript for its safety and modularity, despite some quirks and slower compiler performance.

TypeScript: Angular's Secret WeaponLaurent Duveau

The document discusses TypeScript as a powerful superset of JavaScript designed to improve scalability and maintainability in web development. It highlights TypeScript's features such as strong typing, modularity, and tooling support that help developers avoid common pitfalls in JavaScript coding. Additionally, it touches on TypeScript's compatibility with existing libraries and frameworks like Angular, emphasizing its increasing adoption in the programming community.

Jscript part1Girish Srivastava

The document provides an overview of JScript, including: - Differences between JScript, JavaScript, and VBScript. JScript is Microsoft's version of JavaScript. - JScript versions implemented by different Microsoft applications and browsers over time. - JScript is an interpreted scripting language used to build dynamic web pages and applications. - Topics to be covered in training on JScript fundamentals and programming techniques. - Examples of basic JScript code and how to compile and run JScript applications.

Unit 1 - TypeScript & Introduction to Angular CLI.pptxMalla Reddy University

The document provides an overview of TypeScript and Angular CLI, including installation, interface and class implementation, and the Mean stack development. It underlines TypeScript as a superset of JavaScript that introduces static typing and object-oriented features, and describes Angular as a front-end framework that simplifies client-side web application development. Key concepts covered include the structure of Angular applications, setting up the environment, and utilizing Angular CLI for efficient project management.

TypeScript: Angular's Secret WeaponLaurent Duveau

The document discusses TypeScript as a powerful superset of JavaScript that enhances scalability, modularity, and type safety in web development, making it particularly suitable for developers familiar with Java or C#. It highlights key features such as type annotations, classes, interfaces, and generics, while emphasizing TypeScript's ability to compile to plain JavaScript for compatibility across various environments. Additionally, the document notes TypeScript's integration into Angular and its significant tooling support for improved development efficiency.

11_typescript.pptx for north south university course cse425AnikSahaToni19126196

Mou Deshmukh submitted a document analyzing TypeScript, a superset of JavaScript that adds optional static typing. The document discusses TypeScript's history and development, key features like static typing and interfaces, advantages like catch errors earlier and enhanced tooling support, disadvantages like learning curve and compatibility issues, and common application domains like large web apps.

An Introduction to TypeScriptWrapPixel

This document introduces TypeScript, a strongly-typed programming language that builds upon JavaScript, highlighting its advantages such as better tooling, additional language features, and editor support. It explains TypeScript's significant features, including type inference and safety for scalable coding, while showcasing a simple example of converting JavaScript code to TypeScript. The article also provides instructions on installing TypeScript and writing basic TypeScript code, illustrating the transition from JavaScript to TypeScript.

Introduction to Angular for .NET DevelopersLaurent Duveau

The document outlines a presentation by Laurent Duveau on Angular and TypeScript, emphasizing their role in modern web application development. It discusses tooling, the TypeScript compiler, and the Angular framework's architecture, including components, modules, and dependency injection. The talk also highlights practical setups for integrating Angular with ASP.NET and deploying applications to Azure.

Type scriptLearningTech

TypeScript is a superset of JavaScript that adds static typing and classes to address the problem of writing large applications in JavaScript. It allows for intelligent IDE features like autocompletion and refactoring by adding types that are removed during compilation, ultimately producing plain JavaScript code. TypeScript aims to make large scale JavaScript development easier with types and tooling while still targeting the JavaScript that browsers understand.

TypeScriptSoftware Infrastructure

This document provides an overview of TypeScript, including what it is, why it was created, its key features and benefits. It begins by explaining what JavaScript is and some of its limitations like dynamic typing and lack of modularity. It then introduces TypeScript as a superset of JavaScript that adds optional static typing and class-based object-oriented programming. The document discusses how TypeScript works with existing JavaScript frameworks and libraries, and highlights features like strong typing, better tooling and explicit intent. It provides details on TypeScript's development environment and open source status before concluding with a demonstration and mentioning some alternative languages.

Powerful tools for building web solutionsAndrea Tino

The document provides an overview of modern tools and languages for web development, emphasizing the significance of JavaScript and CSS while introducing alternatives like TypeScript, Sass, and Less for enhanced functionality and structure. It addresses the need for better debugging and profiling techniques in JavaScript, as well as tools for managing color palettes and building cross-platform hybrid applications. The presentation is aimed at individuals with a minimal background in web programming, offering a rapid overview of various technologies and methodologies available today.

Introduction to Angular with TypeScript for .NET DevelopersLaurent Duveau

The document discusses a presentation by Laurent Duveau on Angular and TypeScript, highlighting the benefits of using TypeScript for .NET developers. It covers various aspects of Angular, including its architecture, components, and setup using Visual Studio. The talk emphasizes the combination of JavaScript and TypeScript for building modern web applications, particularly single-page applications.

Type scriptsrinivaskapa1

Type script vs javascript come face to face in battlegroundKaty Slemon

TypeScript VS JavaScript.pptxAlbiorix Technology

Introducing TypeScriptMicrosoft Developer Network (MSDN) - Belgium and Luxembourg

An Introduction to TypeScript: Definition, History, and Key FeaturesMichael Coplin

What is TypeScript? It's Definition, History And FeaturesHarryParker32

Typescript for the programmers who like javascriptAndrei Sebastian Cîmpean

Type scriptMallikarjuna G D

Typescript overviewThanvilahari

TypeScript: Angular's Secret WeaponLaurent Duveau

Jscript part1Girish Srivastava

Unit 1 - TypeScript & Introduction to Angular CLI.pptxMalla Reddy University

TypeScript: Angular's Secret WeaponLaurent Duveau

11_typescript.pptx for north south university course cse425AnikSahaToni19126196

An Introduction to TypeScriptWrapPixel

Introduction to Angular for .NET DevelopersLaurent Duveau

Type scriptLearningTech

TypeScriptSoftware Infrastructure

Powerful tools for building web solutionsAndrea Tino

Introduction to Angular with TypeScript for .NET DevelopersLaurent Duveau

More from Maurice De Beijer [MVP] (20)

Production-ready Next.js App with Cursor AIMaurice De Beijer [MVP]

The document outlines a tutorial for building a production-ready Next.js application focused on a sci-fi movie browsing platform, incorporating AI-assisted development tools and best practices. It covers the project's objectives, prerequisites, and functionality, including a landing page, movie details, and editing features, while leveraging the Cursor IDE for enhanced coding efficiency. Additionally, it provides insights on AI-driven app development and recommendations for effective collaboration with AI tools.

Building Robust Web Applications with Test-Driven Development and Playwright:...Maurice De Beijer [MVP]

This document outlines a tutorial for building a robust movie browsing web application using Test-Driven Development (TDD) and Playwright. It covers the TDD workflow, including writing and executing tests before code implementation, and provides best practices for using Playwright to ensure reliable end-to-end testing. Key concepts include creating a user-friendly interface, implementing features like movie details and editing functionality, and following guidelines for maintaining test reliability.

Mastering React Server Components and Server Actions in React 19Maurice De Beijer [MVP]

This document discusses React Server Components (RSC) and Server Actions introduced in React 19, outlining their advantages such as asynchronous data loading, reduced client-side rendering, and improved type safety. It provides a practical guide to setting up a Next.js application using RSCs, including how to handle data fetching and error management effectively. Additionally, it emphasizes best practices for using server-only, client-only, and shared components for optimized application architecture.

Practice TypeScript Techniques Building React Server Components AppMaurice De Beijer [MVP]

This document discusses various TypeScript techniques for building React server components applications. It covers topics like compiling code to catch errors, using the satisfies operator, custom type mappings, opaque types, readonly types, template literal types, and typing JSON files. The document provides examples for each technique and emphasizes how they can improve type safety, prevent errors, and optimize code. It also recommends applying these techniques and running type checks on pull requests.

A foolproof Way to Estimate a Software ProjectMaurice De Beijer [MVP]

This document discusses effective methods for estimating software projects, highlighting the Program Evaluation and Review Technique (PERT) and three-point estimation as useful tools. It emphasizes the importance of maintaining a small, experienced team and advises against adding personnel to struggling projects, citing Brooks's law. The author also notes the potential of AI, particularly OpenAI's ChatGPT, to assist in task generation and estimation.

Surati Tech Talks 2022 / Build reliable Svelte applications using CypressMaurice De Beijer [MVP]

The document provides an overview of using Cypress for testing Svelte applications, highlighting its advantages such as easy test writing, automatic waiting for elements, and support for TDD. It introduces Svelte and SvelteKit as modern frameworks for building user interfaces, emphasizing their reactive nature and high-performance capabilities. The conclusion underscores the effectiveness of Cypress for end-to-end testing, advocating for its use over unit testing and manual testing.

Build reliable Svelte applications using CypressMaurice De Beijer [MVP]

The document discusses building reliable Svelte applications using Cypress, a front-end testing tool designed for modern web applications. It covers topics such as Test-Driven Development (TDD) and includes practical examples of testing pages, API testing, and running tests in GitHub Actions. The conclusion emphasizes Cypress's effectiveness in end-to-end testing over unit and manual testing, advocating for tests that mirror user actions.

Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]

The Azure Community Conference 2021 covered building reliable applications using React, .NET, and Azure, focusing on topics like TypeScript vs. JavaScript, testing methodologies, API management, and feature flags. Key strategies emphasized included using test-driven development, automating API type updates, and implementing effective error tracking with tools like Azure Application Insights. The conference highlighted the importance of employing TypeScript for serious development and managing application versions efficiently.

Concurrent Rendering Adventures in React 18Maurice De Beijer [MVP]

The document outlines a workshop focused on concurrent rendering techniques in React 18, including the use of <suspense />, <errorboundary />, and new hooks like useTransition(). It discusses prerequisites and installation steps, as well as the benefits of using concurrent mode to enhance application responsiveness. Key concepts include lazy loading, error handling, and managing component rendering through <suspenselist />.

Building reliable applications with React, C#, and AzureMaurice De Beijer [MVP]

This document discusses several topics related to frontend development including TypeScript, hosting, testing, APIs, and runtime errors. It provides information on using TypeScript for type safety and features like mapped types and ES modules. For hosting, it recommends Azure Blob storage and CDN for production and Vite for development. It also discusses test-driven development including using Cypress for end-to-end tests. Managing API types and updates using OpenAPI and NSwag is described as well as handling runtime errors with Application Insights.

Building large and scalable mission critical applications with ReactMaurice De Beijer [MVP]

The document outlines best practices for building large, scalable applications using React, emphasizing the importance of TypeScript, test-driven development, and API management. Key topics include workflow strategies, the use of feature flags for risk management in production, and approaches to handling runtime errors. The overall recommendation is to automate processes, validate data consistently, and utilize modern hosting solutions like Azure for efficient deployment.

Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]

The document discusses building reliable applications using React, .NET, and Azure, emphasizing the importance of TypeScript, test-driven development, and effective workflows. It covers various topics including hosting options, API types, version control, feature flags, and handling runtime errors. The conclusion reiterates key takeaways, highlighting the necessity of automated client types, data validation, and error tracking in the development process.

Why I am hooked on the future of ReactMaurice De Beijer [MVP]

The document discusses advancements and best practices in React, touching on features like concurrent rendering, hooks, and data fetching with suspense. It highlights various hooks such as useEffect, useState, and custom hooks for managing state and side effects in functional components. Additionally, it explains the concept of server components and their differences from client components, emphasizing the importance of proper error handling and rendering strategies.

Building reliable web applications using CypressMaurice De Beijer [MVP]

The document discusses Cypress, a powerful end-to-end testing tool designed for modern web applications, highlighting its ease of use and various features like automatic waiting, video recording, and AJAX request handling. It contrasts end-to-end testing with unit testing, provides guidance on getting started with Cypress, and emphasizes the importance of using accessible queries and visual regression testing. Additionally, it addresses continuous integration and handling flaky tests, ultimately positioning Cypress as a reliable choice for comprehensive application testing.

Getting started with React Suspense and concurrent renderingMaurice De Beijer [MVP]

The document provides an overview of using Suspense and Concurrent Rendering in React, focusing on concepts like bundle splitting, lazy loading, fetching data, and the new Concurrent Mode features. It emphasizes the use of <suspense /> for managing loading states and offers practical steps for implementation, while also guiding users on prerequisites and installation. The workshop is designed to enhance UI responsiveness by employing various data-fetching strategies and leveraging the experimental features of React.

React suspense, not just for Alfred HitchcockMaurice De Beijer [MVP]

The document discusses the React Suspense feature, which allows for rendering suspension when child components are not ready, utilizing fallback components. It covers related concepts such as lazy loading components, data fetching, and the use of hooks like useTransition. Additionally, it highlights the functionalities of Strict Mode and SuspenseList for managing concurrent rendering and controlling loading indicators.

From zero to hero with the Reactive extensions for JavaScriptMaurice De Beijer [MVP]

The document introduces Reactive Extensions for JavaScript (RxJS), a library for composing asynchronous and event-based programs using observable sequences. It covers key concepts such as creating observables, using operators for data manipulation, and the advantages of reactive programming in managing asynchronous data streams. The author emphasizes the power of RxJS in transforming and composing multiple streams efficiently.

Why I am hooked on the future of ReactMaurice De Beijer [MVP]

This document discusses the history and evolution of React components from classes to hooks. It covers the problems with class components, such as complex this bindings and lifecycle methods. Hooks are introduced as a way to use state and side effects in function components by using functions like useState, useEffect and useContext. Custom hooks are also discussed as a way to extract component logic into reusable functions. The document emphasizes that hooks are optional and classes will continue to work, but hooks allow for more flexible and composable components.

The new React Maurice De Beijer [MVP]

This document summarizes React hooks and new features in a presentation. It introduces basic hooks like useState and useEffect, and more advanced hooks such as useReducer, useContext and custom hooks. It also covers new features like lazy loading components, concurrent React rendering, and the potential for ReactCache to improve data loading. The goal is to explain the future of React with its increased use of hooks and functional programming principles.

From zero to hero with the reactive extensions for JavaScriptMaurice De Beijer [MVP]

This document introduces Reactive Extensions for JavaScript (RxJS) and outlines concepts like observable creation, the observer pattern, and reactive programming. It emphasizes the power of RxJS in composing and transforming asynchronous data streams through various operators. The author, Maurice de Beijer, highlights practical applications, such as handling events and data fetching, alongside the benefits of retrying and canceling subscriptions.

Production-ready Next.js App with Cursor AIMaurice De Beijer [MVP]

Building Robust Web Applications with Test-Driven Development and Playwright:...Maurice De Beijer [MVP]

Mastering React Server Components and Server Actions in React 19Maurice De Beijer [MVP]

Practice TypeScript Techniques Building React Server Components AppMaurice De Beijer [MVP]

A foolproof Way to Estimate a Software ProjectMaurice De Beijer [MVP]

Surati Tech Talks 2022 / Build reliable Svelte applications using CypressMaurice De Beijer [MVP]

Build reliable Svelte applications using CypressMaurice De Beijer [MVP]

Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]

Concurrent Rendering Adventures in React 18Maurice De Beijer [MVP]

Building reliable applications with React, C#, and AzureMaurice De Beijer [MVP]

Building large and scalable mission critical applications with ReactMaurice De Beijer [MVP]

Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]

Why I am hooked on the future of ReactMaurice De Beijer [MVP]

Building reliable web applications using CypressMaurice De Beijer [MVP]

Getting started with React Suspense and concurrent renderingMaurice De Beijer [MVP]

React suspense, not just for Alfred HitchcockMaurice De Beijer [MVP]

From zero to hero with the Reactive extensions for JavaScriptMaurice De Beijer [MVP]

Why I am hooked on the future of ReactMaurice De Beijer [MVP]

The new React Maurice De Beijer [MVP]

From zero to hero with the reactive extensions for JavaScriptMaurice De Beijer [MVP]

Recently uploaded (20)

cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfAmirStern2

Introduction to Typescript - GDG On Campus EUEGoogle Developer Group On Campus European Universities in Egypt

Interested in leveling up your JavaScript skills? Join us for our Introduction to TypeScript workshop. Learn how TypeScript can improve your code with dynamic typing, better tooling, and cleaner architecture. Whether you're a beginner or have some experience with JavaScript, this session will give you a solid foundation in TypeScript and how to integrate it into your projects. Workshop content: - What is TypeScript? - What is the problem with JavaScript? - Why TypeScript is the solution - Coding demo

No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureSafe Software

When projects depend on fast, reliable spatial data, every minute counts. AI Clearing needed a faster way to handle complex spatial data from drone surveys, CAD designs and 3D project models across construction sites. With FME Form, they built no-code workflows to clean, convert, integrate, and validate dozens of data formats – cutting analysis time from 5 hours to just 30 minutes. Join us, our partner Globema, and customer AI Clearing to see how they: -Automate processing of 2D, 3D, drone, spatial, and non-spatial data -Analyze construction progress 10x faster and with fewer errors -Handle diverse formats like DWG, KML, SHP, and PDF with ease -Scale their workflows for international projects in solar, roads, and pipelines If you work with complex data, join us to learn how to optimize your own processes and transform your results with FME.

FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptxFIDO Alliance

AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...SOFTTECHHUB

Analysis of the changes in the attitude of the news comments caused by knowin...Matsushita Laboratory

“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...Edge AI and Vision Alliance

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/why-its-critical-to-have-an-integrated-development-methodology-for-edge-ai-a-presentation-from-lattice-semiconductor/ Sreepada Hegade, Director of ML Systems and Software at Lattice Semiconductor, presents the “Why It’s Critical to Have an Integrated Development Methodology for Edge AI” tutorial at the May 2025 Embedded Vision Summit. The deployment of neural networks near sensors brings well-known advantages such as lower latency, privacy and reduced overall system cost—but also brings significant challenges that complicate development. These challenges can be addressed effectively by choosing the right solution and design methodology. The low-power FPGAs from Lattice are well poised to enable efficient edge implementation of models, while Lattice’s proven development methodology helps to mitigate the challenges and risks associated with edge model deployment. In this presentation, Hegade explains the importance of an integrated framework that tightly consolidates different aspects of edge AI development, including training, quantization of networks for edge deployment, integration with sensors and inferencing. He also illustrates how Lattice’s simplified tool flow helps to achieve the best trade-off between power, performance and efficiency using low-power FPGAs for edge deployment of various AI workloads.

TrustArc Webinar - 2025 Global Privacy SurveyTrustArc

How does your privacy program compare to your peers? What challenges are privacy teams tackling and prioritizing in 2025? In the sixth annual Global Privacy Benchmarks Survey, we asked global privacy professionals and business executives to share their perspectives on privacy inside and outside their organizations. The annual report provides a 360-degree view of various industries' priorities, attitudes, and trends. See how organizational priorities and strategic approaches to data security and privacy are evolving around the globe. This webinar features an expert panel discussion and data-driven insights to help you navigate the shifting privacy landscape. Whether you are a privacy officer, legal professional, compliance specialist, or security expert, this session will provide actionable takeaways to strengthen your privacy strategy. This webinar will review: - The emerging trends in data protection, compliance, and risk - The top challenges for privacy leaders, practitioners, and organizations in 2025 - The impact of evolving regulations and the crossroads with new technology, like AI Predictions for the future of privacy in 2025 and beyond

Mastering AI Workflows with FME - Peak of Data & AI 2025Safe Software

Harness the full potential of AI with FME: From creating high-quality training data to optimizing models and utilizing results, FME supports every step of your AI workflow. Seamlessly integrate a wide range of models, including those for data enhancement, forecasting, image and object recognition, and large language models. Customize AI models to meet your exact needs with FME’s powerful tools for training, optimization, and seamless integration

Data Validation and System InteroperabilitySafe Software

Murdledescargadarkweb.pdfvolumen1 100 elementaryJorgeSemperteguiMont

Agentic AI: Beyond the Buzz- LangGraph Studio V2Shashikant Jagtap

FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptxFIDO Alliance

National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...Safe Software

The National Fuels Treatments Initiative (NFT) is transforming wildfire mitigation by creating a standardized map of nationwide fuels treatment locations across all land ownerships in the United States. While existing state and federal systems capture this data in diverse formats, NFT bridges these gaps, delivering the first truly integrated national view. This dataset will be used to measure the implementation of the National Cohesive Wildland Strategy and demonstrate the positive impact of collective investments in hazardous fuels reduction nationwide. In Phase 1, we developed an ETL pipeline template in FME Form, leveraging a schema-agnostic workflow with dynamic feature handling intended for fast roll-out and light maintenance. This was key as the initiative scaled from a few to over fifty contributors nationwide. By directly pulling from agency data stores, oftentimes ArcGIS Feature Services, NFT preserves existing structures, minimizing preparation needs. External mapping tables ensure consistent attribute and domain alignment, while robust change detection processes keep data current and actionable. Now in Phase 2, we’re migrating pipelines to FME Flow to take advantage of advanced scheduling, monitoring dashboards, and automated notifications to streamline operations. Join us to explore how this initiative exemplifies the power of technology, blending FME, ArcGIS Online, and AWS to solve a national business problem with a scalable, automated solution.

Artificial Intelligence in the Nonprofit Boardroom.pdfOnBoard

Oracle Cloud Infrastructure AI FoundationsVICTOR MAESTRE RAMIREZ

FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)Safe Software

Peoples Gas in Chicago, IL has changed to a new Distribution & Transmission Integrity Management Program (DIMP & TIMP) software provider in recent years. In order to successfully deploy the new software we have created a series of ETL processes using FME Form to transform our gas facility data to meet the required DIMP & TIMP data specifications. This presentation will provide an overview of how we used FME to transform data from ESRI’s Utility Network and several other internal and external sources to meet the strict data specifications for the DIMP and TIMP software solutions.

Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...NTT DATA Technology & Innovation

Edge-banding-machines-edgeteq-s-200-en-.pdfAmirStern2

Supporting the NextGen 911 Digital Transformation with FMESafe Software

Next Generation 911 involves the transformation of our 911 system from an old analog one to the new digital internet based architecture. The evolution of NG911 opens up a host of new opportunities to improve the system. This includes everything from device based location, to real time text. This can improve location accuracy dramatically as well as provide live updates from the citizen in need along with real time sensor updates. There is also the opportunity to provide multi-media attachments and medical records if the end user approves. This digital transformation and enhancements all require the support of new NENA and CRTC standards, along with integration across a variety of data streams. This presentation will focus on how FME has supported NG911 transformations to date, and how we are positioning FME to support the enhanced capabilities to come. This session will be of interest to emergency services, municipalities and anyone who may be interested to know more about how emergency services are being improved to provide more accurate, localized information in order to improve the speed and relevance of emergency response and ultimately save more lives and provide better outcomes for those in need.

cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfAmirStern2

Introduction to Typescript - GDG On Campus EUEGoogle Developer Group On Campus European Universities in Egypt

No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureSafe Software

FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptxFIDO Alliance

AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...SOFTTECHHUB

Analysis of the changes in the attitude of the news comments caused by knowin...Matsushita Laboratory

“Why It’s Critical to Have an Integrated Development Methodology for Edge AI,...Edge AI and Vision Alliance

TrustArc Webinar - 2025 Global Privacy SurveyTrustArc

Mastering AI Workflows with FME - Peak of Data & AI 2025Safe Software

Data Validation and System InteroperabilitySafe Software

Murdledescargadarkweb.pdfvolumen1 100 elementaryJorgeSemperteguiMont

Agentic AI: Beyond the Buzz- LangGraph Studio V2Shashikant Jagtap

FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptxFIDO Alliance

National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...Safe Software

Artificial Intelligence in the Nonprofit Boardroom.pdfOnBoard

Oracle Cloud Infrastructure AI FoundationsVICTOR MAESTRE RAMIREZ

FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)Safe Software

Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...NTT DATA Technology & Innovation

Edge-banding-machines-edgeteq-s-200-en-.pdfAmirStern2

Supporting the NextGen 911 Digital Transformation with FMESafe Software

Type script = javascript (alomst) done right

1. TypeScript = JavaScript (almost) done right Maurice de Beijer

2. Who am I  Maurice de Beijer  The Problem Solver  Microsoft MVP since 2005  DevelopMentor instructor  Twitter: @mauricedb  Blog: http://msmvps.com/blogs/theproblemsolver/  Web: http://www.HTML5Support.nl  E-mail: [email protected]

3. Agenda  What is TypeScript?  Why do we need TypeScript?  What is wrong with JavaScript?  TypeScript features  Type annotations  Type inference  Modules  Classes

4. What is TypeScript?  An open source programming language developed at Microsoft  By Anders Hejlsberg, lead architect of C#  A super set of JavaScript  All JavaScript is valid TypeScript  Adds optional type checking, classes, interfaces and more  Compiles to “normal” JavaScript  Either ECMAScript 5 or ECMAScipt 3

5. Why do we need TypeScript?  JavaScript was designed for small scripts  These days JavaScript applications get bigger and more complex  Gmail is reported to have 443,000 lines of JavaScript in 2010  This trend will continue  Single Page Applications in the browser  Node.js on the server

6. What is wrong with JavaScript?

7. Douglas Crockford on TypeScript Microsoft's TypeScript may be the best of the many JavaScript front ends. It seems to generate the most attractive code. And I think it should take pressure off of the ECMAScript Standard for new features like type declarations and classes. Anders has shown that these can be provided nicely by a preprocessor, so there is no need to change the underlying language. I think that JavaScript's loose typing is one of its best features and that type checking is way overrated. TypeScript adds sweetness, but at a price. It is not a price I am willing to pay.

8. Things TypeScript adds to JavaScript  Type annotations  Type inference  Modules  Classes  Interfaces  Based on the ECMAScript 6 proposed standard

9. Type annotations

10. Type inference

11. Type annotations/arrays

12. Type annotations/param arrays

13. Arrow functions

14. Type annotations/casts

15. TypeScript type definitions  The DOM and standard JavaScript types are provided

16. DefinitelyTyped

17. Modules

18. Interfaces

19. Interfaces

20. Interfaces & function overloading

21. Interfaces & type definitions

22. Classes

23. Classes & constructors

24. Classes & constructors

25. Classes & properties

26. Arrow functions revisited

27. Arrow functions revisited

28. Classes & inheritance

29. TypeScript is still JavaScript  Not all JavaScript problems are solved by TypeScript  Some older browsers support ECMAScript 3 (December 1999)  Some older browsers have non standard DOM/CSS implementations  jQuery remains an extremely useful library

30. Conclusion  TypeScript is not perfect  But it helps a lot  You are not forced to use a new language  Leverage existing JavaScript skills en libraries  Consider it for your next “large“ JavaScript project  After all the risk is small

Type script = javascript (alomst) done right

Recommended

More Related Content

What's hot (14)

Similar to Type script = javascript (alomst) done right (20)

More from Maurice De Beijer [MVP] (20)

Recently uploaded (20)

Type script = javascript (alomst) done right