Javascript Topic Overview: Difference between revisions

Latest revision as of 10:49, 20 May 2020

Category:JavaScript

title: Javascript Frameworks, Libraries, etc
author: Lukasz Sokolowski, NobleProg

</slideshow>

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? (--------------;