Welk framework / taal voor simpele frontend

[c-nan]

Ik doe al heel erg lang niks meer met websites bouwen. In de tijd dat ik er nog mee bezig was deed ik alles in PHP 4.

Ik heb in python een REST API draaien (ivm Flask). Het accepteert alleen GET requests en geeft een true of false in JSON formaat terug (of soms iets meer info, maar heel erg basic dus).

Wat ik wil bouwen is een simpele (HTML) formulier waarin je 1 veld kunt invullen. Formulier moet mijn API aanspreken en resultaat ervan weergeven (in een nette formaat/layout). Als ik uitga van mijn eerdere opgedane kennis bouw ik dit in PHP, maar lijkt mij overkill.

Tegenwoordig heb je van alles (React, Angular, Vue, jQuery en vast nog veel meer). Met geen enkele heb ik ervaring of kennis.

Welke framework/taal zouden jullie gebruiken als je mijn verhaal leest? Of gewoon puur JS en thats it?

[Brilsmurfffje]

Als je al ervaring hebt met PHP, zou je het Laravel framework kunnen gebruiken, daar zit een template engine in op basis van Bootstrap:
https://laravel.com/

[Croga]

Waarom zou je zo moeilijk doen?

Het formulier kan heel eenvoudig in platte HTML.
De JSON response kun je met een XSLT omzetten naar een mooie weergave.

Daar is geen framework voor nodig, geen PHP, geen JavaScript, alleen een platte HTML pagina en een XSLT en klaar is klara.

[Stoelpoot]

Sowieso heb je, als je Javascript gebruikt, geen reden om een groot framework te gebruiken. Als het echt zo simpel is, volstaat standaard JS prima.

Voor de afweging JS vs PHP: Is jouw API een beveiligingsrisico als jan en alleman er een request naartoe kunnen sturen? Gebruik dan PHP en scherm de API af voor iedereen behalve jouw server. Als dat niet zo is, dan volstaat Javascript prima.

@Croga hoe wil je dat precies voor elkaar krijgen? Wat voor techniek wil je gebruiken om het request uberhaupt te versturen en te verwerken zonder een of andere programmeertaal? Op mijn bronnen over de techniek die je voorstel zie ik geen voorbeelden zonder PHP of JS.

[Gropah]

Als het heel erg basic is, waarom laat je de browser dan niet een POST doen bij het submitten van het formulier en render je gewoon de goede pagina op de server? Ja, je hebt een page refresh, maar aan de andere kant: super simpel en het werkt zonder javascript.

[Croga]

Stoelpoot schreef op maandag 1 juli 2019 @ 14:50:
@Croga hoe wil je dat precies voor elkaar krijgen? Wat voor techniek wil je gebruiken om het request uberhaupt te versturen en te verwerken zonder een of andere programmeertaal? Op mijn bronnen over de techniek die je voorstel zie ik geen voorbeelden zonder PHP of JS.

TS heeft het over een API die GET requests accepteert. Een GET request is, neem ik aan, gewoon een HTTP GET. Een formulier kan "on click" van de submit knop gewoon die HTTP GET aanroepen en een HTTP response daar op terug krijgen die je voorziet van een XSLT. Ja, in theorie is die knop dan een stuk JavaScript. Maar dusdanig eenvoudig dat ik niet zou praten over "programmeren"

Zoals @Gropah vermeld zou je de API ook naar een POST om kunnen zetten, dan heb je helemaal geen JavaScript meer nodig, volstaat een eenvoudige "submit" knop.

[ Voor 9% gewijzigd door Croga op 01-07-2019 14:56 ]

[RM-rf]

c-nan schreef op maandag 1 juli 2019 @ 14:35:


Welke framework/taal zouden jullie gebruiken als je mijn verhaal leest? Of gewoon puur JS en thats it?

vanillaJS kan best, maar vermoedelijk bespaart het je wat ontwikkeltijd en moeite als je gewoon jQuery gebruikt

https://api.jquery.com/jquery.get/

[Stoelpoot]

Croga schreef op maandag 1 juli 2019 @ 14:55:
[...]

TS heeft het over een API die GET requests accepteert. Een GET request is, neem ik aan, gewoon een HTTP GET. Een formulier kan "on click" van de submit knop gewoon die HTTP GET aanroepen en een HTTP response daar op terug krijgen die je voorziet van een XSLT. Ja, in theorie is die knop dan een stuk JavaScript. Maar dusdanig eenvoudig dat ik niet zou praten over "programmeren"

Zoals @Gropah vermeld zou je de API ook naar een POST om kunnen zetten, dan heb je helemaal geen JavaScript meer nodig, volstaat een eenvoudige "submit" knop.

Dat is inderdaad een logische uitleg. Gaaf idee ook, nooit aan gedacht dat je XSLT zou kunnen gebruiken om HTML te renderen. Maar inderdaad is dat dan wel een klein stukje Javascript, vandaar mijn verwarring.

Wat betreft het renderen op de server: Dan zit je waarschijnlijk weer met PHP te werken, want gezien de vraagstelling verwacht ik dat de API gescheiden moet blijven. Ik zou zeggen dat de POST verwerken via PHP of Javascript ongeveer hetzelfde niveau aan complexiteit zal zijn. Persoonlijk zou ik dan voor JS kiezen zodat je geen PHP hoeft te draaien en onderhouden op de webserver. Maar zoals ik zeg, dat is mijn persoonlijke voorkeur.

[emnich]

Je moet JSON helemaal niet met XSTL gaan omzetten.

De API geeft zo weinig informatie terug dat je het lekker met vanilla JS moet doen.

[c-nan]

Thanks voor de reacties! Ik heb geen enkel ervaring met de genoemde frameworks, daarom eigenlijk ook geen idee of het slim is om uberhaupt een framework te gebruiken.

Ik kwam net Axios tegen, werkt out of the box zonder gedoe.

Straks ook eens naar Vanilla JS en jQuery kijken.

Het liefst laat ik de API voor wat het is, dus daar wil ik niks gaan ombouwen.

Nogmaals, thanks!

[Gropah]

Stoelpoot schreef op maandag 1 juli 2019 @ 15:01:
[...]

Wat betreft het renderen op de server: Dan zit je waarschijnlijk weer met PHP te werken, want gezien de vraagstelling verwacht ik dat de API gescheiden moet blijven. Ik zou zeggen dat de POST verwerken via PHP of Javascript ongeveer hetzelfde niveau aan complexiteit zal zijn. Persoonlijk zou ik dan voor JS kiezen zodat je geen PHP hoeft te draaien en onderhouden op de webserver. Maar zoals ik zeg, dat is mijn persoonlijke voorkeur.

Als hij een REST API heeft draaien in python mbv flask, neem ik aan dat hij aan de source kan zitten. Dan moet het geen probleem zijn om flask templates er bij te pakken en 1 route toe te voegen om de logica af te handelen. Daar hoeft echt geen PHP bij komen te kijken. Sterker nog, ik zou het afraden als een deel van de API al is geïmplementeerd in python, juist ook vanwege onderhoud. Des te minder talen die je er in betrekt, des te minder onderhoud het is.

[ Voor 5% gewijzigd door Gropah op 01-07-2019 15:26 ]

[EddoH]

c-nan schreef op maandag 1 juli 2019 @ 15:21:

Straks ook eens naar Vanilla JS en jQuery kijken.

Weet dat 'vanilla JS' geen apart framework of library is maar er gewoon plain JavaScript mee bedoeld wordt

[gitaarwerk]

Gropah schreef op maandag 1 juli 2019 @ 15:24:
[...]


Als hij een REST API heeft draaien in python mbv flask, neem ik aan dat hij aan de source kan zitten. Dan moet het geen probleem zijn om flask templates er bij te pakken en 1 route toe te voegen om de logica af te handelen. Daar hoeft echt geen PHP bij komen te kijken. Sterker nog, ik zou het afraden als een deel van de API al is geïmplementeerd in python, juist ook vanwege onderhoud. Des te minder talen die je er in betrekt, des te minder onderhoud het is.

Niet helemaal eens. In principe is een API gewoon een open standaard welke met iedere taal je tegenaan zou kunnen praten. Een voordeel is wel is als het gaan om security, kun je met PHP, als je die kennis toch al hebt, iets met CSRF token doen. Is wel weer een diepgang, maar daar ben je dan makkelijker in staat. Goed, nu raak ik wel al een beetje van de draad.

Waar ik het wel met je eens bent is dat minder talen minder onderhoud is.


@c-nan
Wat ik een beetje mis is de context; is het in een bedrijf of meer voor jezelf, is er security bij gemoeid, gaat het om klant data,...aka, wat doet het formulier en welke oplossing moet dit bieden voor de gebruiker (wie is de gebruiker). En denk als we dat weten je een beter advies kunnen geven. Afhankelijk daarvan is het dan ook duidelijker wat voor jou het beste is.

[veltnet]

Zo simpel mogelijk houden, dus PHP (zonder frameworks) en een klein stukje native JS (zonder frameworks).

Het klinkt simpel dus houdt het in eerste instantie simpel en maak het vooral niet moeilijker dan het is.

Je kunt het later alsnog mooier/complexer maken als de simpele versie eenmaal werkt.

[Ed Vertijsment]

Aangezien je nu flask gebruikt zou ik lekker Flask i.c.m. Jinja2 als template engine gebruiken. Kun je, je backend laten zoals het is. Als iets meer "batteries included" zoekt en dicht bij huis wilt blijven kun je nog naar Django kijken, kun je overigens ook aan combinatie met Jinja gebruiken.

Voor de frontend wil je vooral niet meer lagen op plakken dan nodig. React en soortverwanten zijn ontzettend krachtig maar eigenlijk alleen nuttig als je wat complexere dingen aan het doen bent. Doe je dat niet dan is het nodeloze abstractie.

Met "VanillaJS" wordt bedelt dat je je JavaScript schrijft zonder framework, IMO een verstandige keuze voor simpele dingen. Wellicht wil je een library gebruiken om te praten met je API, Axios lijkt mij daar een goede keuze voor.

jQuery zal ik vermijden, zul je tegenwoordig steeds minder tegenomen omdat het nodeloos bestaande API's abstraheert, de reden dat het bestaat is voornamelijk omdat het historisch gezien een goede abstractielaag tussen browsers waren toen deze nog niet grotendeels compatible waren. Tegenwoordig is een setup met "Vanilla" Javascript i.c.m. met dedicated libraries meer gemeengoed.

[Immutable]

EddoH schreef op maandag 1 juli 2019 @ 19:56:
[...]


Weet dat 'vanilla JS' geen apart framework of library is maar er gewoon plain JavaScript mee bedoeld wordt

Sorry kan het gewoon niet laten... http://vanilla-js.com (Dit is een parodie website, een grapje dus voor TS)

[Koffie32]

RM-rf schreef op maandag 1 juli 2019 @ 15:01:
[...]


vanillaJS kan best, maar vermoedelijk bespaart het je wat ontwikkeltijd en moeite als je gewoon jQuery gebruikt

https://api.jquery.com/jquery.get/

Zal wel meevallen als je fetch gebruikt: https://developer.mozilla...API/Fetch_API/Using_Fetch

Ondersteuning is goed genoeg: https://caniuse.com/#search=fetch

Ten minste ook geen reject op een HTTP error status.

c-nan schreef op maandag 1 juli 2019 @ 14:35:
Ik doe al heel erg lang niks meer met websites bouwen. In de tijd dat ik er nog mee bezig was deed ik alles in PHP 4.

Ik heb in python een REST API draaien (ivm Flask). Het accepteert alleen GET requests en geeft een true of false in JSON formaat terug (of soms iets meer info, maar heel erg basic dus).

Wat ik wil bouwen is een simpele (HTML) formulier waarin je 1 veld kunt invullen. Formulier moet mijn API aanspreken en resultaat ervan weergeven (in een nette formaat/layout). Als ik uitga van mijn eerdere opgedane kennis bouw ik dit in PHP, maar lijkt mij overkill.

Tegenwoordig heb je van alles (React, Angular, Vue, jQuery en vast nog veel meer). Met geen enkele heb ik ervaring of kennis.

Welke framework/taal zouden jullie gebruiken als je mijn verhaal leest? Of gewoon puur JS en thats it?

Om hier op terug te komen.

Ik zou geen framework/library gebruiken. Je use-case is zo eenvoudig dat je snel gaat over-engineeren. Je kunt zoals ik het begrijp je project eenvoudig maken met 1 HTML5 pagina, 1 CSS3 script en wat (lijkt er op dat je er maar 1 nodig hebt) JS functies.

Angular en Vue zijn complete frameworks. Een van beide gebruiken gaat je dwingen de dingen op "hun" manier te doen en geeft zoveel extra code die je nooit gaat gebruiken.

React is een library en hoewel dus een stuk kleiner dat Angular en Vue en met een stuk minder meningen is het nog steeds overkill voor jouw use-case.

Als je jezelf wil uitdagen en "te veel" van het goede wil doen. Kies er dan eerder voor om je REST-API zo aan te passen dat hij GraphQL ondersteund.

[ Voor 63% gewijzigd door Koffie32 op 07-08-2019 12:34 ]