Javascript Topic Overview

title

Javascript Frameworks, Libraries, etc

author

Lukasz Sokolowski, NobleProg

Overview (interesting) ⌘

Overview con't (boring) ⌘

• Node.js - no(de) joking(!), this is serious(killer) stuff!!
  • Express.js, Hapi.js - web servers like Apache or IIS (Microsoft)
• React.js and React Native
  • (VS would be better, but better not always means worse, iykwim) (*)
• Vue.js vs Angular - joking, we shouldn't actually compare them
  • (Google pride would suffer, for sure!)
• Angular - yup, worth enough to have it's OWN one point
• Flutter - have no idea, why am I presenting this topic (seriously..)
• Django (unchained, obviously)
• MEAN stack (EXTRA topic, so we're gonna start with it, hahaha..)

Overview con't (cheat sheet) ⌘

Framework / devel kit	Library / Web server	Language (programming)
Nodejs	Expressjs	JavaScript
Angular	Vuejs	TypeScript
Flutter	Reactjs	Dart
Django	--	Python

BEing Mean (extra topic) ⌘

• MEAN stack
  • NP course materials: Mean_Stack

React.js ⌘

• Library, not a Framework
  • NP course materials: Reactjs_basics

React Intro ⌘

• Developed by engineers at Facebook
  • "A JavaScript library for building user interfaces"
• React enables websites to display
  • Complex animations
  • Large volumes of data
  • Other memory-heavy tasks without slowing down

React Intro Con't ⌘

• Declarative
• Component-Based
• Reusable and independent

Declarative ⌘

• Declarative views make the code more predictable and easier to debug
• Very easy way to create interactive UIs
• Simple views for each state in the application
• Efficient update and render of the right components when the data changes

Component-Based ⌘

• Encapsulated components that manage their own state
  • Compose them to make complex UIs
• Component logic is written in JavaScript instead of templates
  • Easy to pass rich data through the app
  • In the same time keeps state out of the DOM (Document Object Model)

Reusable ⌘

• Independent from technology stack used in the whole project
• We can develop new features without rewriting existing code
• Can render on the server (for example using Nodejs)
• Can power mobile apps using React Native

React Native Beginner Developer ⌘

React Native Advanced Developer ⌘

React Native ⌘

• Allows to create native apps for Android and iOS
• Written in JavaScript — rendered with native code
  • React primitives render to native platform UI, app uses the same native platform APIs other apps do
  • Platform-specific versions of components so a single codebase can share code across platforms
  • One team can maintain two platforms and share a common technology — React
• Fast Refresh
  • changes visible as soon as saved - no need to wait for native builds to finish
  • simply - save, see, repeat
• Seamless Cross-Platform
  • React components wrap existing native code
  • and interact with native APIs via React’s declarative UI paradigm and JavaScript

Reactjs Examples ⌘

pl.reactjs.org/community/examples.html
github.com/ReactNativeNews/React-Native-Apps

• Instagram
• Facebook
• Pinterest
• Skype
• Tesla

How do we VUE it? ⌘

- When was the last time, you were in the Cinema (not City)?
- Mmm, let me think.. About yesterday?
- Good, then forget about it for at least 2 next years, when you do Vuejs apps.
You'll gonna have to code a lot on your own and without fireworks.
Yep. Deeeeeeeep.. I know.

Vuejs ⌘

"Why not angular, then?"

Vuejs con't ⌘

• Approachable
  • We literally need to know only: HTML, CSS and JavaScript
  • and start building things in no time
• Versatile
  • An incrementally adoptable ecosystem
  • Scales between a library and a full-featured framework
• Performant
  • 20KB min+gzip Runtime
  • Blazing Fast Virtual DOM
  • Minimal Optimization Efforts

Vuejs examples ⌘

v1.vuejs.org/examples/elastic-header.html

• Nintendo.com
• Chess.com (35.10M visitors in 08.2018)
• Gitlab, about.gitlab.com/
• Wizzair.com
• Laravel.com (php framework)

Angular ⌘

"How to overKILL 3 stones with one Birdy"

-- Bernard'one Capone Szlachta'one --

Angular con't

CROSS PLATFORM	SPEED AND PERFORMANCE	PRODUCTIVITY	FULL DEVELOPMENT STORY
Progressive Web Apps	Code Generation	Templates	Testing
Native	Universal	Angular CLI	Animation
Desktop	Code Splitting	IDEs	Accessibility

Angular examples ⌘

https://www.madewithangular.com/

Is Flutter Batman's great-great-granddaughter? ⌘

- So, tell me: Do you bleed?
- No, but give me my 2 fingers back, you Ba(t)stard!

Flutter ⌘

• Open-source UI software development kit
  • created by Google
• Used to develop applications for
  • Android, iOS, Windows, Mac, Linux, Google Fuchsia and the web
• Being able to render consistently at 120 FPS (frames per second)
• Uses Dart programming language

Dart ⌘

(Not) A JavaScript Alternative?
Yup, even Angular chose TypeScript. Full stop.
Hmmm.. Same mother, 2 different fathers, huh?
Interesting, isn't it? (-;

Dart Con't ⌘

• Yet another Google's child
• Client-optimized programming language for fast apps on any platform
• Optimized for UI - specialized around the needs of user interface creation
• Productive development - iterative changes, hot reloads instantly in running app
• Fast on all platforms
  • Compiles to ARM & x64 machine code for mobile, desktop, and backend
  • Also compiles to JavaScript for the web

Flutter examples ⌘

https://www.flutterbyexample.com/

• Alibaba (the world’s biggest online commerce company)
• Watermaniac (tracking of drinking water)
• Music Tutor (learn to read music, sheets)
• Google Ads App (advertising manager app)

Flutter VS React Native ⌘

- Which solution offers the fastest development time?
- Depends on the specifics of the project and the balance of team’s skills.

• Do your developers know Dart? (Flutter)
• Are your developers fluent in JavaScript? (React Native)
• Do you want to build your app’s GUI using native UI components? (React Native)
• Is brand-first design your priority? (Flutter)

Django developer ⌘

- Come on, come, come - gooood boy!

Django ⌘

• High-level Python Web framework, open source
• Encourages rapid development and clean, pragmatic design
• Takes care of much of the hassle of Web development

Phyton ⌘

A high-level and all-purpose programming language

• Can be used for practically any project
• Especially popular for
  • data science
  • business process automation
  • machine learning
  • artificial intelligence
  • Internet of Things applications

Django con't ⌘

• Ridiculously fast
  • Django was designed to help developers take applications from concept to completion as quickly as possible
• Reassuringly secure
  • Django takes security seriously and helps developers avoid many common security mistakes
• Exceedingly scalable
  • Some of the busiest sites on the Web leverage Django’s ability to quickly and flexibly scale
• Versatile
  • Can be used for almost any project, from CMSs to e-commerce apps to on-demand delivery platforms

When to use Django? ⌘

Top use cases

• Prototypes and MVPs (Minimum Viable Product)
• Content management systems (like Drupal)
• Customer relationship management (CRM) systems
• Social networks
• On-demand delivery apps
• E-commerce platforms
• mHealth apps
• Online marketplaces
• Business management apps
• Appointment scheduling apps

Django examples ⌘

• Washington Post (03.2019, The Washington Post website hit 172 million total monthly visits)
• Instagram
• Spotify
• Dropbox
• Mozilla
• Pinterest
• NASA
• National Geographic

Make love not war - summary ⌘

Every day a new js lib/framework happens.
Yes. Even in that way (-;
It might mean chaos, if you let it to be.
Or just use it. And have fun(*)!

(*) migrate each month to the new one (----;

Sources

• Angular
  • angular.io/
• Django
  • www.djangoproject.com/
• Flutter
  • flutter.dev/
  • dart.dev/
  • en.wikipedia.org/wiki/Flutter_(software)
  • www.thedroidsonroids.com/blog/apps-made-with-flutter
• Mean stack
  • en.wikipedia.org/wiki/MEAN_(solution_stack)
• Nodejs
  • nodejs.org/en/
• Reactjs
  • pl.reactjs.org/community/examples.html
  • reactnative.dev/
• Vuejs
  • vuejs.org/v2/guide/comparison.html#React

(*)

Oh, well - joking like B is a privilege, isn't it? (--------------;