SlideShare a Scribd company logo
Building End-to-End
Web Apps
Using TypeScript
Gil Fink

Senior Architect
SELA
Agenda
The Why
Introduction to TypeScript
Building a Simple App with TypeScript
Q&A
Summary
Wait! JavaScript End to End?
"JavaScript is the Assembly Language of the
Web"
- Erik Meijer
“you can write large programs in JavaScript.
You just can’t maintain them”
- Anders Hejlsberg
JavaScript Benefits
Powerful language:
Functional
Object oriented
Dynamic
Great runtimes
Huge community
Tons of libraries
Tools
But it also includes a lot of bad parts
The Alternatives
We have several alternatives:
Hard core JavaScript development
CoffeeScript – http://coffeescript.org
Dart – http://dartlang.org
Clojurescript https://github.com/clojure/clojurescript
Script# - http://scriptsharp.com/
What is TypeScript?
“TypeScript is a typed superset of JavaScript that
compiles to plain JavaScript”
~typescriptlang.org

6
Hello TypeScript

Demo
TypeScript Key Features

Support
standard
JavaScript code
with static
typing

Encapsulation
through classes
and modules

Support for
constructors,
properties and
functions

Interfaces and
enums support

Lambda
support => and
generics

Intellisense and
syntax checking

8
From TypeScript to JavaScript
TypeScript Code

JavaScript Code
TypeScript
Compiler

class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}

tsc

greet() {
return “Hi," + this.greeting;
}

var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet =
function () {
return “Hi," + this.greeting;
};
return Greeter;
})();

}

9
TypeScript Type Annotations
You can add type annotations to variables and
functions

var str : string = ‘hello’; // str is annotated as string

function foo(name: string) : string { // both parameter and function annotated
return ‘hello’ + name;
}

10
Classes and Interfaces
You can define classes
You can define interfaces and implement them
later
interface IGreeter {
greet(): void;
}

var Greeter = (function () {
function Greeter() {
}

class Greeter implements IGreeter{
greeting: string;

Greeter.prototype.greet = function () {
console.log(this.greeting);

greet() {
console.log(this.greeting);
}

}

};
return Greeter;

})();
Modules
You define modules to wrap classes, interfaces
and functionality
module app {
export interface IGreeter {
greet(): void;
export class Greeter implements IGreeter {
greeting: string;
greet() {

console.log(this.greeting);
}
}

(function (app) {
var Greeter = (function () {

function Greeter() {

}

}

var app;

}
Greeter.prototype.greet = function () {
console.log(this.greeting);
};
return Greeter;
})();
app.Greeter = Greeter;
})(app || (app = {}));
Building a Simple End-to-End App with TypeScript

Demo
Questions
Summary
•

•

Open source language that compiles into
JavaScript
Key features:
• Code encapsulation
• Maintainable code
• Tooling support

•

Learn TypeScript today!
Resources
Session slide deck and demos –
http://sdrv.ms/18SDF8r
TypeScript – http://www.typescriptlang.org
My Website – http://www.gilfink.net
Follow me on Twitter – @gilfink
THANK YOU
Gil Fink
Senior Architect
gilf@sela.co.il
@gilfink
http://www.gilfink.net

More Related Content

What's hot

React vs angular (mobile first battle)
React vs angular (mobile first battle)React vs angular (mobile first battle)
React vs angular (mobile first battle)
Michael Haberman
 
Groovy / comparison with java
Groovy / comparison with javaGroovy / comparison with java
Groovy / comparison with java
Liviu Tudor
 
Milos Marinkovic "Modular Android UI"
Milos Marinkovic "Modular Android UI"Milos Marinkovic "Modular Android UI"
Milos Marinkovic "Modular Android UI"
IT Event
 
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Develcz
 
Daniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDaniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého Schizma
Develcz
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
dvcrn
 
45 Tools to Boost Your Front-End
45 Tools to Boost Your Front-End45 Tools to Boost Your Front-End
45 Tools to Boost Your Front-End
Nicolas PENNEC
 
Ask The Expert - Typescript: A stitch in time saves nine
Ask The Expert - Typescript: A stitch in time saves nineAsk The Expert - Typescript: A stitch in time saves nine
Ask The Expert - Typescript: A stitch in time saves nine
Gianluca Carucci
 
Angular directives and pipes
Angular directives and pipesAngular directives and pipes
Angular directives and pipes
Knoldus Inc.
 
Nicholas Gustilo "Clean Android: building great mobile apps"
Nicholas Gustilo "Clean Android: building great mobile apps"Nicholas Gustilo "Clean Android: building great mobile apps"
Nicholas Gustilo "Clean Android: building great mobile apps"
IT Event
 
Alt Dot Net Usergroup: Does the world end if you stop using Visual Studio?
Alt Dot Net Usergroup: Does the world end if you stop using Visual Studio?Alt Dot Net Usergroup: Does the world end if you stop using Visual Studio?
Alt Dot Net Usergroup: Does the world end if you stop using Visual Studio?
Garry Stewart
 
Unity - NullReferenceException = ♥ / Aleksandr Kugushev (EPAM)
Unity - NullReferenceException = ♥ / Aleksandr Kugushev (EPAM)Unity - NullReferenceException = ♥ / Aleksandr Kugushev (EPAM)
Unity - NullReferenceException = ♥ / Aleksandr Kugushev (EPAM)
DevGAMM Conference
 
Firebug: Javascript Development Made Easier
Firebug: Javascript Development Made EasierFirebug: Javascript Development Made Easier
Firebug: Javascript Development Made Easier
Binny V A
 
F# on the Server-Side
F# on the Server-SideF# on the Server-Side
F# on the Server-Side
Tomas Petricek
 
Introducing Razor - A new view engine for ASP.NET
Introducing Razor - A new view engine for ASP.NET Introducing Razor - A new view engine for ASP.NET
Introducing Razor - A new view engine for ASP.NET
Shiju Varghese
 
Introduction To JavaScript
Introduction To JavaScriptIntroduction To JavaScript
Introduction To JavaScript
Reema
 
CouchApp - Build scalable web applications and relax
CouchApp - Build scalable web applications and relaxCouchApp - Build scalable web applications and relax
CouchApp - Build scalable web applications and relax
openForce Information Technology GesmbH
 
node.js - Fast event based web application development
node.js - Fast event based web application developmentnode.js - Fast event based web application development
node.js - Fast event based web application development
openForce Information Technology GesmbH
 
Property Based BDD Examples (ETSI UCAAT 2016, Budapest)
Property Based BDD Examples (ETSI UCAAT 2016, Budapest)Property Based BDD Examples (ETSI UCAAT 2016, Budapest)
Property Based BDD Examples (ETSI UCAAT 2016, Budapest)
Gáspár Nagy
 
Itjsf49
Itjsf49Itjsf49
Itjsf49
Kati Long
 

What's hot (20)

React vs angular (mobile first battle)
React vs angular (mobile first battle)React vs angular (mobile first battle)
React vs angular (mobile first battle)
 
Groovy / comparison with java
Groovy / comparison with javaGroovy / comparison with java
Groovy / comparison with java
 
Milos Marinkovic "Modular Android UI"
Milos Marinkovic "Modular Android UI"Milos Marinkovic "Modular Android UI"
Milos Marinkovic "Modular Android UI"
 
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
 
Daniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDaniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého Schizma
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
45 Tools to Boost Your Front-End
45 Tools to Boost Your Front-End45 Tools to Boost Your Front-End
45 Tools to Boost Your Front-End
 
Ask The Expert - Typescript: A stitch in time saves nine
Ask The Expert - Typescript: A stitch in time saves nineAsk The Expert - Typescript: A stitch in time saves nine
Ask The Expert - Typescript: A stitch in time saves nine
 
Angular directives and pipes
Angular directives and pipesAngular directives and pipes
Angular directives and pipes
 
Nicholas Gustilo "Clean Android: building great mobile apps"
Nicholas Gustilo "Clean Android: building great mobile apps"Nicholas Gustilo "Clean Android: building great mobile apps"
Nicholas Gustilo "Clean Android: building great mobile apps"
 
Alt Dot Net Usergroup: Does the world end if you stop using Visual Studio?
Alt Dot Net Usergroup: Does the world end if you stop using Visual Studio?Alt Dot Net Usergroup: Does the world end if you stop using Visual Studio?
Alt Dot Net Usergroup: Does the world end if you stop using Visual Studio?
 
Unity - NullReferenceException = ♥ / Aleksandr Kugushev (EPAM)
Unity - NullReferenceException = ♥ / Aleksandr Kugushev (EPAM)Unity - NullReferenceException = ♥ / Aleksandr Kugushev (EPAM)
Unity - NullReferenceException = ♥ / Aleksandr Kugushev (EPAM)
 
Firebug: Javascript Development Made Easier
Firebug: Javascript Development Made EasierFirebug: Javascript Development Made Easier
Firebug: Javascript Development Made Easier
 
F# on the Server-Side
F# on the Server-SideF# on the Server-Side
F# on the Server-Side
 
Introducing Razor - A new view engine for ASP.NET
Introducing Razor - A new view engine for ASP.NET Introducing Razor - A new view engine for ASP.NET
Introducing Razor - A new view engine for ASP.NET
 
Introduction To JavaScript
Introduction To JavaScriptIntroduction To JavaScript
Introduction To JavaScript
 
CouchApp - Build scalable web applications and relax
CouchApp - Build scalable web applications and relaxCouchApp - Build scalable web applications and relax
CouchApp - Build scalable web applications and relax
 
node.js - Fast event based web application development
node.js - Fast event based web application developmentnode.js - Fast event based web application development
node.js - Fast event based web application development
 
Property Based BDD Examples (ETSI UCAAT 2016, Budapest)
Property Based BDD Examples (ETSI UCAAT 2016, Budapest)Property Based BDD Examples (ETSI UCAAT 2016, Budapest)
Property Based BDD Examples (ETSI UCAAT 2016, Budapest)
 
Itjsf49
Itjsf49Itjsf49
Itjsf49
 

Viewers also liked

Learning typescript
Learning typescriptLearning typescript
Learning typescript
Alexandre Marreiros
 
Typescript - MentorMate Academy
Typescript - MentorMate AcademyTypescript - MentorMate Academy
Typescript - MentorMate Academy
Dimitar Danailov
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
Travis van der Font
 
Introduction about type script
Introduction about type scriptIntroduction about type script
Introduction about type script
Binh Quan Duc
 
Introduction to Type Script by Sam Goldman, SmartLogic
Introduction to Type Script by Sam Goldman, SmartLogicIntroduction to Type Script by Sam Goldman, SmartLogic
Introduction to Type Script by Sam Goldman, SmartLogic
SmartLogic
 
Type script
Type scriptType script
Type script
LearningTech
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
Laurent Duveau
 
Typescript in 30mins
Typescript in 30mins Typescript in 30mins
Typescript in 30mins
Udaya Kumar
 
TypeScript - An Introduction
TypeScript - An IntroductionTypeScript - An Introduction
TypeScript - An Introduction
NexThoughts Technologies
 
TypeScript Overview
TypeScript OverviewTypeScript Overview
TypeScript Overview
Aniruddha Chakrabarti
 
Typescript 101 introduction
Typescript 101   introductionTypescript 101   introduction
Typescript 101 introduction
Bob German
 
Introduction to TypeScript
Introduction to TypeScriptIntroduction to TypeScript
Introduction to TypeScript
Bob German
 
Getting started with typescript
Getting started with typescriptGetting started with typescript
Getting started with typescript
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
Getting started with typescript and angular 2
Getting started with typescript  and angular 2Getting started with typescript  and angular 2
Getting started with typescript and angular 2
Knoldus Inc.
 
TypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the painTypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the pain
Sander Mak (@Sander_Mak)
 
Introduction to TypeScript by Winston Levi
Introduction to TypeScript by Winston LeviIntroduction to TypeScript by Winston Levi
Introduction to TypeScript by Winston Levi
Winston Levi
 

Viewers also liked (16)

Learning typescript
Learning typescriptLearning typescript
Learning typescript
 
Typescript - MentorMate Academy
Typescript - MentorMate AcademyTypescript - MentorMate Academy
Typescript - MentorMate Academy
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
Introduction about type script
Introduction about type scriptIntroduction about type script
Introduction about type script
 
Introduction to Type Script by Sam Goldman, SmartLogic
Introduction to Type Script by Sam Goldman, SmartLogicIntroduction to Type Script by Sam Goldman, SmartLogic
Introduction to Type Script by Sam Goldman, SmartLogic
 
Type script
Type scriptType script
Type script
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
 
Typescript in 30mins
Typescript in 30mins Typescript in 30mins
Typescript in 30mins
 
TypeScript - An Introduction
TypeScript - An IntroductionTypeScript - An Introduction
TypeScript - An Introduction
 
TypeScript Overview
TypeScript OverviewTypeScript Overview
TypeScript Overview
 
Typescript 101 introduction
Typescript 101   introductionTypescript 101   introduction
Typescript 101 introduction
 
Introduction to TypeScript
Introduction to TypeScriptIntroduction to TypeScript
Introduction to TypeScript
 
Getting started with typescript
Getting started with typescriptGetting started with typescript
Getting started with typescript
 
Getting started with typescript and angular 2
Getting started with typescript  and angular 2Getting started with typescript  and angular 2
Getting started with typescript and angular 2
 
TypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the painTypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the pain
 
Introduction to TypeScript by Winston Levi
Introduction to TypeScript by Winston LeviIntroduction to TypeScript by Winston Levi
Introduction to TypeScript by Winston Levi
 

Similar to Building End to-End Web Apps Using TypeScript

Getting Started with TypeScript
Getting Started with TypeScriptGetting Started with TypeScript
Getting Started with TypeScript
Gil Fink
 
Typescript language extension of java script
Typescript language extension of java scriptTypescript language extension of java script
Typescript language extension of java script
michaelaaron25322
 
Getting Started with the TypeScript Language
Getting Started with the TypeScript LanguageGetting Started with the TypeScript Language
Getting Started with the TypeScript Language
Gil Fink
 
TypeScript for Java Developers
TypeScript for Java DevelopersTypeScript for Java Developers
TypeScript for Java Developers
Yakov Fain
 
"Xapi-lang For declarative code generation" By James Nelson
"Xapi-lang For declarative code generation" By James Nelson"Xapi-lang For declarative code generation" By James Nelson
"Xapi-lang For declarative code generation" By James Nelson
GWTcon
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
Griffon: Re-imaging Desktop Java Technology
Griffon: Re-imaging Desktop Java TechnologyGriffon: Re-imaging Desktop Java Technology
Griffon: Re-imaging Desktop Java Technology
James Williams
 
Building native Android applications with Mirah and Pindah
Building native Android applications with Mirah and PindahBuilding native Android applications with Mirah and Pindah
Building native Android applications with Mirah and Pindah
Nick Plante
 
Introduction to JSF
Introduction toJSFIntroduction toJSF
Introduction to JSF
SoftServe
 
Graphql usage
Graphql usageGraphql usage
Graphql usage
Valentin Buryakov
 
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
Codemotion
 
End to-end apps with type script
End to-end apps with type scriptEnd to-end apps with type script
End to-end apps with type script
Gil Fink
 
Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny
Design Summit - UI Roadmap - Dan Clarizio, Martin PovolnyDesign Summit - UI Roadmap - Dan Clarizio, Martin Povolny
Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny
ManageIQ
 
GWT Extreme!
GWT Extreme!GWT Extreme!
GWT Extreme!
cromwellian
 
Google Web Toolkits
Google Web ToolkitsGoogle Web Toolkits
Google Web Toolkits
Yiguang Hu
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Malla Reddy University
 
.NET and C# introduction
.NET and C# introduction.NET and C# introduction
.NET and C# introduction
Peter Gfader
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHP
Andrew Rota
 
8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation
JohnLagman3
 
Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018
Loiane Groner
 

Similar to Building End to-End Web Apps Using TypeScript (20)

Getting Started with TypeScript
Getting Started with TypeScriptGetting Started with TypeScript
Getting Started with TypeScript
 
Typescript language extension of java script
Typescript language extension of java scriptTypescript language extension of java script
Typescript language extension of java script
 
Getting Started with the TypeScript Language
Getting Started with the TypeScript LanguageGetting Started with the TypeScript Language
Getting Started with the TypeScript Language
 
TypeScript for Java Developers
TypeScript for Java DevelopersTypeScript for Java Developers
TypeScript for Java Developers
 
"Xapi-lang For declarative code generation" By James Nelson
"Xapi-lang For declarative code generation" By James Nelson"Xapi-lang For declarative code generation" By James Nelson
"Xapi-lang For declarative code generation" By James Nelson
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
Griffon: Re-imaging Desktop Java Technology
Griffon: Re-imaging Desktop Java TechnologyGriffon: Re-imaging Desktop Java Technology
Griffon: Re-imaging Desktop Java Technology
 
Building native Android applications with Mirah and Pindah
Building native Android applications with Mirah and PindahBuilding native Android applications with Mirah and Pindah
Building native Android applications with Mirah and Pindah
 
Introduction to JSF
Introduction toJSFIntroduction toJSF
Introduction to JSF
 
Graphql usage
Graphql usageGraphql usage
Graphql usage
 
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
 
End to-end apps with type script
End to-end apps with type scriptEnd to-end apps with type script
End to-end apps with type script
 
Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny
Design Summit - UI Roadmap - Dan Clarizio, Martin PovolnyDesign Summit - UI Roadmap - Dan Clarizio, Martin Povolny
Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny
 
GWT Extreme!
GWT Extreme!GWT Extreme!
GWT Extreme!
 
Google Web Toolkits
Google Web ToolkitsGoogle Web Toolkits
Google Web Toolkits
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
 
.NET and C# introduction
.NET and C# introduction.NET and C# introduction
.NET and C# introduction
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHP
 
8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation
 
Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018
 

More from Gil Fink

Becoming a Tech Speaker
Becoming a Tech SpeakerBecoming a Tech Speaker
Becoming a Tech Speaker
Gil Fink
 
Web animation on steroids web animation api
Web animation on steroids web animation api Web animation on steroids web animation api
Web animation on steroids web animation api
Gil Fink
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
Gil Fink
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
Gil Fink
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
Gil Fink
 
Stencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has ArrivedStencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has Arrived
Gil Fink
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
Gil Fink
 
Being a tech speaker
Being a tech speakerBeing a tech speaker
Being a tech speaker
Gil Fink
 
Working with Data in Service Workers
Working with Data in Service WorkersWorking with Data in Service Workers
Working with Data in Service Workers
Gil Fink
 
Demystifying Angular Animations
Demystifying Angular AnimationsDemystifying Angular Animations
Demystifying Angular Animations
Gil Fink
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
Gil Fink
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
Gil Fink
 
Who's afraid of front end databases?
Who's afraid of front end databases?Who's afraid of front end databases?
Who's afraid of front end databases?
Gil Fink
 
One language to rule them all type script
One language to rule them all type scriptOne language to rule them all type script
One language to rule them all type script
Gil Fink
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
Gil Fink
 
Web components
Web componentsWeb components
Web components
Gil Fink
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
Gil Fink
 
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJS
Gil Fink
 
Who's afraid of front end databases
Who's afraid of front end databasesWho's afraid of front end databases
Who's afraid of front end databases
Gil Fink
 
Biological modeling, powered by angular js
Biological modeling, powered by angular jsBiological modeling, powered by angular js
Biological modeling, powered by angular js
Gil Fink
 

More from Gil Fink (20)

Becoming a Tech Speaker
Becoming a Tech SpeakerBecoming a Tech Speaker
Becoming a Tech Speaker
 
Web animation on steroids web animation api
Web animation on steroids web animation api Web animation on steroids web animation api
Web animation on steroids web animation api
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Stencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has ArrivedStencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has Arrived
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Being a tech speaker
Being a tech speakerBeing a tech speaker
Being a tech speaker
 
Working with Data in Service Workers
Working with Data in Service WorkersWorking with Data in Service Workers
Working with Data in Service Workers
 
Demystifying Angular Animations
Demystifying Angular AnimationsDemystifying Angular Animations
Demystifying Angular Animations
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
 
Who's afraid of front end databases?
Who's afraid of front end databases?Who's afraid of front end databases?
Who's afraid of front end databases?
 
One language to rule them all type script
One language to rule them all type scriptOne language to rule them all type script
One language to rule them all type script
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
Web components
Web componentsWeb components
Web components
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
 
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJS
 
Who's afraid of front end databases
Who's afraid of front end databasesWho's afraid of front end databases
Who's afraid of front end databases
 
Biological modeling, powered by angular js
Biological modeling, powered by angular jsBiological modeling, powered by angular js
Biological modeling, powered by angular js
 

Recently uploaded

Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 

Recently uploaded (20)

Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 

Building End to-End Web Apps Using TypeScript

  • 1. Building End-to-End Web Apps Using TypeScript Gil Fink Senior Architect SELA
  • 2. Agenda The Why Introduction to TypeScript Building a Simple App with TypeScript Q&A Summary
  • 3. Wait! JavaScript End to End? "JavaScript is the Assembly Language of the Web" - Erik Meijer “you can write large programs in JavaScript. You just can’t maintain them” - Anders Hejlsberg
  • 4. JavaScript Benefits Powerful language: Functional Object oriented Dynamic Great runtimes Huge community Tons of libraries Tools But it also includes a lot of bad parts
  • 5. The Alternatives We have several alternatives: Hard core JavaScript development CoffeeScript – http://coffeescript.org Dart – http://dartlang.org Clojurescript https://github.com/clojure/clojurescript Script# - http://scriptsharp.com/
  • 6. What is TypeScript? “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org 6
  • 8. TypeScript Key Features Support standard JavaScript code with static typing Encapsulation through classes and modules Support for constructors, properties and functions Interfaces and enums support Lambda support => and generics Intellisense and syntax checking 8
  • 9. From TypeScript to JavaScript TypeScript Code JavaScript Code TypeScript Compiler class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } tsc greet() { return “Hi," + this.greeting; } var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return “Hi," + this.greeting; }; return Greeter; })(); } 9
  • 10. TypeScript Type Annotations You can add type annotations to variables and functions var str : string = ‘hello’; // str is annotated as string function foo(name: string) : string { // both parameter and function annotated return ‘hello’ + name; } 10
  • 11. Classes and Interfaces You can define classes You can define interfaces and implement them later interface IGreeter { greet(): void; } var Greeter = (function () { function Greeter() { } class Greeter implements IGreeter{ greeting: string; Greeter.prototype.greet = function () { console.log(this.greeting); greet() { console.log(this.greeting); } } }; return Greeter; })();
  • 12. Modules You define modules to wrap classes, interfaces and functionality module app { export interface IGreeter { greet(): void; export class Greeter implements IGreeter { greeting: string; greet() { console.log(this.greeting); } } (function (app) { var Greeter = (function () { function Greeter() { } } var app; } Greeter.prototype.greet = function () { console.log(this.greeting); }; return Greeter; })(); app.Greeter = Greeter; })(app || (app = {}));
  • 13. Building a Simple End-to-End App with TypeScript Demo
  • 15. Summary • • Open source language that compiles into JavaScript Key features: • Code encapsulation • Maintainable code • Tooling support • Learn TypeScript today!
  • 16. Resources Session slide deck and demos – http://sdrv.ms/18SDF8r TypeScript – http://www.typescriptlang.org My Website – http://www.gilfink.net Follow me on Twitter – @gilfink
  • 17. THANK YOU Gil Fink Senior Architect gilf@sela.co.il @gilfink http://www.gilfink.net