Lsokolowski: /* () /

2020-05-20T10:49:36Z

(*)

New page

{{Cat|JavaScript}}

<slideshow style="nobleprog" headingmark="⌘" incmark="…" scaled="true" font="Trebuchet MS" >
;title: Javascript Frameworks, Libraries, etc
;author: Lukasz Sokolowski, NobleProg
</slideshow>

== Overview (interesting) ⌘==

[[File:Js_fw_lifecycle.jpg|400px]]

=== 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) ⌘===
{| class="wikitable"
|-
! 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 ⌘==
[[File:Reactjs_italian.jpg|300px]]
* '''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 ⌘===
[[File:React_native_joke.jpg|400px]]

=== React Native Advanced Developer ⌘===
[[File:Ract_native_devel_joke.jpg|400px]]

=== 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? ⌘==
[[File:Logo-vue-joke.png]]
- 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 ⌘===
[[File:Logo-vue-js.png|200px]]

[[Reactjs_basics#Why_not_angular.3F|"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 ===
{| class="wikitable" style="text-align: center; color: green;"
|-
! 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? ⌘==

[[File:TellMeDoYouBleed.jpg|400px]]

- 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 ⌘====
[[File:Dart_joke.jpg|300px]]
(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 ⌘==
[[File:Fat_dog_django_joke.jpg|250px]]
- Come on, come, come - gooood boy!

=== Django ⌘===
[[File:Django-valet-joke.jpeg|400px]]

* 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 ⌘==
[[File:Js_world_joke.jpg|250px]]
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?
(--------------;

Javascript Topic Overview - Revision history

Lsokolowski: /* (*) */

Lsokolowski: /* () /