SlideShare a Scribd company logo
ANGULAR 2 & TYPESCRIPT
Ante Burazer, Vladan Strigo
 Kakve su to moderne web aplikacije?
 Kako smo došli do ovdje?
 Što je zapravo Angular?
 Zašto ga odabrati, a zašto i ne?
 Osnovni dijelovi
 Što novog nosi Angular 2?
 Gdje u svemu ovome dođe TypeScript?
Kakve su to moderne web aplikacije?
 Ideja je ”glumiti” Windows aplikaciju
 JavaScript bazirane aplikacije
 Vrte se na klijentu
 SPA – Single Page Aplikacije
 Sva logika na jednoj stranici!
 ”The worlds most misunderstood programming language”
- Douglas Crockford
Što je zapravo Angular?
 ”What HTML would have been, had it been designed for
applications”
 ” Angular is built around the belief that declarative code is better
than imperative when it comes to building UIs and wiring
software components together, while imperative code is
excellent for expressing business logic.”
 Naglašava HTML stranu aplikacije
 MVC / MVVM design patterni na klijentu
 Potpuni framework
Zašto ga odabrati?
 Jedan od vodećih frontend frameworka
 Zreo framework iza kojeg stoji Google i aktivan community
 Aktivno prati trendove i prilagođava se potrebama korisnika
 Upravo prepisan za v2 iz nule
 Out-of-the-box kompletan framework
 Routing, ajax, testing, DI
 Potiče konzistentnost, olakšava learning curve
 Može se koristiti i za razvoj hibridnih mobilnih aplikacija
Zašto ga ne odabrati?
 Framework je velik
 Nemogućnost selektivnog odabira komponenti
 Specifična sintaksa i HTML tagovi
Osnovni dijelovi
Components Directives
Routes Services
DEMO
Što novog nosi Angular 2?
 Prepisan iz nule da riješi arhitekturna ograničenja iz v1
DirectivesChange DetectionComponents
Dependecy Inject. TypeScript NPM Packages
Komponente? Angular 1
Event
Data
APP Person
People
List
Pet
Komponente? Angular 2
Event
Data
APP
People
List
Pet
List
Pet Pet Person Person
Change Detection? Što želimo?
Change Detection? Kako radi?
 Napravljeno da bude proširiv / zamjenjiv mehanizam
 Sada je moguće birati za svaku komponentu način detekcije
 Standardni način, Observables, Immutable
 Također jako bitna promjena - stablasta struktura vs. flat
strukture iz v1
Change Detection? Kako radi?
DEMO
TypeScript
 Najveća mana JavaScripta  nema type checking
 Najveća prednost JavaScripta  nema type checking

 TypeScript = JavaScript + Types
TypeScript
JavaScript
TypeScript
 Microsoft did it right 
 Design time alat
 Ne dodaje type checking ni provjere u naš kod
 Provjere sintakse
 Objektno orijentiran JS
 Generira ES5 kod
 ECMAScript 4, ECMAScript 5, ECMAScript 6…?
DEMO
 Moderne web aplikacije?
 Upoznali smo se s Angularom
 Pronašli mjeru i razloge za koristiti ga
 Upoznali Angular 2
 Stavili TypeScript na kartu
Što smo prošli?
PITANJA?
aburazer@netmedia.hr
vladan@netmedia.hr
HVALA NA PAŽNJI
http://meet.netmedia.hr

More Related Content

Featured (20)

PDF
2024 Trend Updates: What Really Works In SEO & Content Marketing
Search Engine Journal
 
PDF
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
PDF
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
OECD Directorate for Financial and Enterprise Affairs
 
PDF
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
SocialHRCamp
 
PDF
2024 State of Marketing Report – by Hubspot
Marius Sescu
 
PDF
Everything You Need To Know About ChatGPT
Expeed Software
 
PDF
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
PDF
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
PDF
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
PDF
Skeleton Culture Code
Skeleton Technologies
 
PDF
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
PDF
Content Methodology: A Best Practices Report (Webinar)
contently
 
PPTX
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
PDF
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
PDF
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
PDF
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
PDF
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
PDF
Getting into the tech field. what next
Tessa Mero
 
PDF
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
PDF
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
2024 Trend Updates: What Really Works In SEO & Content Marketing
Search Engine Journal
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
OECD Directorate for Financial and Enterprise Affairs
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
SocialHRCamp
 
2024 State of Marketing Report – by Hubspot
Marius Sescu
 
Everything You Need To Know About ChatGPT
Expeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 

Angular 2 and TypeScript - 2016 Dump Day

  • 1. ANGULAR 2 & TYPESCRIPT Ante Burazer, Vladan Strigo
  • 2.  Kakve su to moderne web aplikacije?  Kako smo došli do ovdje?  Što je zapravo Angular?  Zašto ga odabrati, a zašto i ne?  Osnovni dijelovi  Što novog nosi Angular 2?  Gdje u svemu ovome dođe TypeScript?
  • 3. Kakve su to moderne web aplikacije?  Ideja je ”glumiti” Windows aplikaciju  JavaScript bazirane aplikacije  Vrte se na klijentu  SPA – Single Page Aplikacije  Sva logika na jednoj stranici!  ”The worlds most misunderstood programming language” - Douglas Crockford
  • 4. Što je zapravo Angular?  ”What HTML would have been, had it been designed for applications”  ” Angular is built around the belief that declarative code is better than imperative when it comes to building UIs and wiring software components together, while imperative code is excellent for expressing business logic.”  Naglašava HTML stranu aplikacije  MVC / MVVM design patterni na klijentu  Potpuni framework
  • 5. Zašto ga odabrati?  Jedan od vodećih frontend frameworka  Zreo framework iza kojeg stoji Google i aktivan community  Aktivno prati trendove i prilagođava se potrebama korisnika  Upravo prepisan za v2 iz nule  Out-of-the-box kompletan framework  Routing, ajax, testing, DI  Potiče konzistentnost, olakšava learning curve  Može se koristiti i za razvoj hibridnih mobilnih aplikacija
  • 6. Zašto ga ne odabrati?  Framework je velik  Nemogućnost selektivnog odabira komponenti  Specifična sintaksa i HTML tagovi
  • 9. Što novog nosi Angular 2?  Prepisan iz nule da riješi arhitekturna ograničenja iz v1 DirectivesChange DetectionComponents Dependecy Inject. TypeScript NPM Packages
  • 10. Komponente? Angular 1 Event Data APP Person People List Pet
  • 13. Change Detection? Kako radi?  Napravljeno da bude proširiv / zamjenjiv mehanizam  Sada je moguće birati za svaku komponentu način detekcije  Standardni način, Observables, Immutable  Također jako bitna promjena - stablasta struktura vs. flat strukture iz v1
  • 15. DEMO
  • 16. TypeScript  Najveća mana JavaScripta  nema type checking  Najveća prednost JavaScripta  nema type checking   TypeScript = JavaScript + Types
  • 18. TypeScript  Microsoft did it right   Design time alat  Ne dodaje type checking ni provjere u naš kod  Provjere sintakse  Objektno orijentiran JS  Generira ES5 kod  ECMAScript 4, ECMAScript 5, ECMAScript 6…?
  • 19. DEMO
  • 20.  Moderne web aplikacije?  Upoznali smo se s Angularom  Pronašli mjeru i razloge za koristiti ga  Upoznali Angular 2  Stavili TypeScript na kartu Što smo prošli?