How to be a

console.log("yes we can create fully functional apps with just TypeScript!");

Full Stack

How to be a

Developer

Seiji Villafranca

github.com/SeijiV13

Technical Lead, Frontier Software Asia Philippines

Trainer, RakSquad

Auth0 Ambassador

Community Lead, AngularPH,

seijivillafranca.com

Talks

JavaScript?

Programming Language for the Web

Makes Web Pages Interactive

Can Validate Data

Without it, Pages our just Pages!

A little about History

Developed in 10 Days

Brendan Eich, September 1995

Mocha

LiveScript

JavaScript

JavaScript Vs. Java

Don't be confused they are not related to each other!

JavaScript is called JavaScript for marketing strategies

Some Facts!

Where is JavaScript Today?

Refrence: https://codeburst.io/javascript-trends-in-2020-b194bebc5ef8

Companies that uses JavaScript

Uses NodeJS on Azure Cloud Platform

Internet of Things (IoT)

Microsoft

Companies that uses JavaScript

Front End is Pure JavaScript

Developed KrakenJS (own version of express)

Companies that uses JavaScript

Gmail Web Client, Google Docs

Has own JS Framework AngularJS, Angular

Developed V8 for Chrome which is the heart of Node JS

Seeing JavaScript for the first time

Superset Languages

Prototypes

Dynamic Types

TypeScript

Generics

Interfaces

ES6

Types

A sample code here

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, 
        public lastName: string) {
            this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

let user = new Student("Jane", "A", "Doe");

Transpiler that provides JS the features of typing,

Object Oriented Programming

Catches Error and provides fixes before running code

Transpiler

Target: ES6/ES5

Browsers don't understand Typescript

Now on 4.2

Community

https://www.typescriptlang.org/community

Famous Frameworks /Libraries

Hybrid Frameworks

Mobile Apps

Desktop Apps

Angular

Front End Framework

Single Page Application

Typescript Based

Component Based

Angular

Module

Component

Service

Collection of Components, Services, Directives, and also Modules

Can be imported into multiple Modules

A piece of code that defines the view with custom behaviors

Cannot be imported into multiple modules

Lets think of this one as a customized HTML Element with customized attributes

Used to communicate with endpoints

Used by components by dependency injection

Can also be injected by services

Side Menu

Can be seen on most of all pages

Can be a component that can be reused in different pages

Boilerplate code reduction

Flow

Prerequisites

npm install –g @angular/cli

https://nodejs.org/en/

Check npm verision

npm -v

ng --version

Good to go?

Install Angular CLI

Install Node JS

Back End Node Framework

Typescript Based

Shares many concepts with Angular that's why its called the perfect match

Title Text

Flow

Prerequisites

npm install –g @nest/cli

https://nodejs.org/en/

Check npm verision

npm -v

nest --version

Good to go?

Install Nest CLI

Install Node JS

How to be a

Full Stack

How to be a

Seiji Villafranca

Talks

JavaScript?