[mk321]

#programowanie #webdev #javascript #react #vue

Potrzebuję zrobić prosty formularz (z kawałkiem jakiejś logiki), zebrać dane z pól i wysłać zapytanie REST-owe.

Normalnie bym to zrobił w np. React lub Angular, ale do tego muszę tworzyć cały projekt (i zapinać jakiegoś Webpacka albo chociaż gulpa). Banalna rzecz.

Ale to jest taka jedna statyczna strona z formularzem i jednym zapytaniem. Nie chce podpinać Webpacka i budować całego frontu.

10 lat temu użyłbym po prostu jQuery.
5 lat temu użyłbym AngularJS (wpinało się jako bibliotekę w

[brakloginuf]

@mk321: a po co Ci framework w ogole do tego?

[mk321]

@brakloginuf: no nie potrzebuję frameworka. React to nie framework.

Ale robienie w czystym JS document.getElementById i wysyłanie zapytań przez new XMLHttpRequest() to trochę lipa, nie?
Mówię, że najbardziej to by mi pasowało jQuery.
Ale wstyd tego używać w 2020 :/

[Saly]

@mk321: możesz użyc Reacta (https://frontarm.com/james-k-nelson/single-file-react-app/ ), vue na pewno też ma coś takiego, ale nie pisałem w nim nic. To co tracisz (w przypadku Reacta) to na pewno JSX, wsparcie dla starszych przeglądarek, jeśli piszesz w nowym dialekcie JSa

[brakloginuf]

Ale robienie w czystym JS document.getElementById i wysyłanie zapytań przez XMLHttpRequest() to trochę lipa, nie?

@mk321: ej obudz sie, dzis w czystym js sie nieco inaczej to robi ( ͡° ͜ʖ ͡°)

[brakloginuf]

@mk321: np. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch czy https://developer.mozilla.org/pl/docs/Web/API/Document/querySelector

[brakloginuf]

@mk321: a jquery do takich zadan nie jest zle, z tym ze wiekszosc jego funkcjonalnosci jest juz w ecma wiec nie ma sensu nieraz go dodawac skoro natywnie przegladarka obsluzy

[mk321]

@Saly: z transpilacją ES5/6 nie mam problemu, bo zakładam, że moi użytkownicy będą mieli najnowsze przeglądarki.

Ale pisanie w React bez JSX jest bardzo słabe:

return (

[kuite22]

@mk321: blazor?
https://docs.microsoft.com/pl-pl/aspnet/core/mvc/views/razor?view=aspnetcore-5.0

[Chanandler]

@mk321: https://github.com/developit/htm

[mk321]

@brakloginuf: racja, że zamiast getElementById mogę wybrać po selectorze i zamiast XMLHttpRequest jest fetch. Ale to nadal pisanie całości w HTML i wydłubywanie pól. A jak mam jakąś logikę (np. jak ktoś zaznaczy checkboxa, to ma się pokazywać inne pole w formularzu), to babranie się z ręcznym wstawianiem i usuwaniem z DOM. A tak w React lub Angular miałbym ładne małe komponenciki.

[mk321]

@kuite22: Blazor jest pod .Net. To całkiem inne zastosowanie.
Trzeba mieć pod to aplikację backendową w .Net. Jakbym chciał serwować stronę z serwera, to pod Springiem w Javie bym sobie używał jakiegoś Spring MVC, JSP, Thymeleaf czy JSF. Ale nie o to mi chodzi. Wyobraźmy sobie, że nie mam backendu, a strzelam REST-em do czyjegoś backendu.

@Chanandler: pierwszy raz słyszę o htm. Chyba nie jest zbyt popularne. Może dlatego,

[Chanandler]

@mk321:

Na pewno nie trzeba tego budować (widzę coś wspomniane o Babel)?

nie, htm is JSX-like syntax in plain JavaScript - no transpiler necessary.

możesz sobie wrzucić https://unpkg.com/htm@3.0.4/preact/standalone.umd.js w script i pisać normalny JSX (waga to jakieś 12kb), ktoś inny zasugerował Vue, w nim możesz zrobić co chcesz wrzucając w script tag ale waży znacznie więcej (ponad 100 kb), ponieważ ładujesz cały kompilator, imho dla 1 formularza nie warto

[t.....k]

@mk321 zamiast czytać wysrywy wokopków pod pytaniem mógłbyś właśnie kończyć konfigurację projektu pod reacta albo coś innego gdzie nie ma problemów z formularzami ( ͡º ͜ʖ͡º)

[mk321]

@cppguy: jednak działa bez budowania. Nie wiem co za magia się stała, że takie coś {{ message }} działa bezpośrednio w przeglądarce.

Może czas nauczyć się Vue. A myślałem, że to równorzędna alternatywa dla Reacta.

[doee]

@mk321: preact + parcel, ale nie widzę nic złego żeby to zrobić w vanilla js