JavaScript Einstieg in die Webentwicklung

[GrooveXT]

Hallo,

ich bin seit ca. 7 Jahren als Softwareentwickler tätig. Mein Hauptaugenmerk lag bisher auf Desktop Applikationen. Ich habe viel im Backend mit Java EE zu tun gehabt, aber zuletzt auch vermehrt im Frontend mit WPF, Silverlight und C#. Gerade der Kontakt mit Silverlight hat bei mir den Wunsch geweckt stärker in die Web-Entwicklung vorzudringen. Ich habe da ein zwei Programm die ich zurzeit noch in WPF implementiert habe und nun gerne probeweise in eine Web Anwendung gießen möchte.

Silverlight wäre zwar für die einfachste Lösung, scheint mir aber aus diversen anderen Gründen (Support, Kompatibilität) nicht der richtige Weg. Ich hatte neben Silverlight schon erste Gehversuche in der Webprogrammierung mit GRAILS und ein bisschen JavaScript.
Das Problem was sich mir aber immer wieder stellt ist, dass wenn man von sowas wie Silverlight / C# zu HTML5/CSS/JavaScript wechselt sich einem der Magen umdreht. Es scheint alles so ungeordnet und zusammenhangslos. Es drängt sich das Gefühl auf keinen richtigen Standard zu haben. Mir fehlen auch irgendwie die richtigen Werkzeuge.

Was ich nun für meinen Einstieg suche:
1. Womit arbeitet man, welches JS-Framework deckt das Meiste ab?
2. Womit mache ich Desktop-Like GUIs?
3. Welche IDE mit Code-Completion und GUI Editor (WYSIWYG) kann man dafür nehmen?
4. Was wählt man Serverseitig? Applikationserver? Wenn ja welchen?

Ihr seht ich bin echt total verwirrt wie ich mich der Sache am Besten nähere. Vielleicht könnt ihr mich ja ein wenig erhellen.

PS: Die Anwendung die ich portiere will wandelt mehrere PDFs in Bilder um verschickt sie dann per SSH auf einen Remote Computer. Ist sowas in JS möglich oder brauche ich dafür definitiv nen App Server im Backend?

Vielleicht habt ihr ja auch ein paar Buch/Magazin/Blog Tipps für mich.

Vielen Dank.

 

[Daaron]

Es scheint alles so ungeordnet und zusammenhangslos. Es drängt sich das Gefühl auf keinen richtigen Standard zu haben.

Tatsächlich ist es eher so, dass du hier tatsächliche Standards hast, und zwar offene. Das ist nicht wie bei Silverlight/Flash, wo dir ein proprietärer Hersteller diktiert, wie du es machen musst und wie SEINE proprietären Plugins das dann darstellen.
Hier entscheidet ausschließlich die W3C-Spezifikation.

1. Womit arbeitet man, welches JS-Framework deckt das Meiste ab?

Geschmackssache. Ich mag Mootools lieber als jQuery, aber für jQuery gibt es teilweise die interessanteren Plugins.

2. Womit mache ich Desktop-Like GUIs?

HTML, CSS, JS...

3. Welche IDE mit Code-Completion und GUI Editor (WYSIWYG) kann man dafür nehmen?

Wer HTML/CSS in einem WYSIWYG-Editor schreibt, der hat schon verloren.

4. Was wählt man Serverseitig? Applikationserver? Wenn ja welchen?

Was man eben beherrscht und was der spezifischen Aufgabe angemessen ist. Grundsatz: Es gibt nichts, was PHP nicht lösen kann. Es gibt nur Sachen, die z.B. Java oder node.js performanter oder einfacher lösen können.

PS: Die Anwendung die ich portiere will wandelt mehrere PDFs in Bilder um verschickt sie dann per SSH auf einen Remote Computer. Ist sowas in JS möglich oder brauche ich dafür definitiv nen App Server im Backend?

JS ist turing-vollständig, also kann es sowas auch. Die Frage ist eher, ob es das richtige Werkzeug dafür ist... Du müsstest einen kompletten PDF-Parser in JS schreiben, das ist Selbstmord.

 

[Speedy.]

1. Womit arbeitet man, welches JS-Framework deckt das Meiste ab?

Die gängisten Frameworks sind jQuery und Mootools. Beide können einem das Leben enorm vereinfachen und decken das meiste ab (DOM-Manipulation, Event Binding, Animationen, usw.). Ich persönlich bevorzuge aber "pures" JavaScript ohne jegliche Frameworks. Bei kleineren Projekten sehe ich es nicht ein, 80 KB zusätzliches JavaScript über die Leitung zu schieben und auszuführen, nur um ein Element aus/einzublenden. Bei großen Projekten mag es Sinn machen, vor allem da das Cross Browser Handling einem abgenommen wird (und dieser Aspekt ist mitunter der nervigste an der Webentwicklung - versuch mal eine Seite mit Animationen im Internet Explorer < 9 zum laufen zu bekommen...).

2. Womit mache ich Desktop-Like GUIs?

Im Idealfall? Mit HTML und CSS. Zur Webentwicklung gehören nicht nur reines JavaScript, sondern auch HTML (für das Markup, also die Elemente deiner Seite wie Listen, Text, Bilder, usw.) und CSS (zum Stylen dieser Elemente). JavaScript sollte für die Interaktivität deiner Seite sorgen, also Elemente ein/ausblenden oder Formulardaten vor dem Versenden prüfen, aber nicht für das Styling oder den Seitenaufbau.

Welche IDE mit Code-Completion und GUI Editor (WYSIWYG) kann man dafür nehmen?

Kommt drauf an, was du gewohnt bist und magst. Ich persönliche liebe und arbeite mit Sublime Text 3 (kostet ca. $50), dass ist aber "nur" ein Editor, keine IDE. Wenn's eine IDE sein soll, dann können die meisten mit HTML, CSS und JS umgehen, such dir eine aus (NetBeans, Eclipse, usw.). Bitte, bitte kein WYSIWYG-Editor.

4. Was wählt man Serverseitig? Applikationserver? Wenn ja welchen?

Als Webserver kommt meist der Apache 2 zum Einsatz, er liefert statische Ressourcen wie Bilder oder HTML-Seiten aus. Eine Alternative wäre noch nginx, der soll schneller und effizienter sein, aber damit habe ich bisher noch nie gearbeitet. Wenn du reines HTML und JS ausliefern willst, also ohne Logik im Backend, dann reicht dir theoretisch der Apache, ansonsten müssen noch weitere Module für serverseitige Sprachen installiert werden (PHP mal als Beispiel genannt).
Wenn du Java EE kannst, dann würde sich natürlich der Tomcat anbieten mit Java als Backendlogik. Warum auf eine andere Sprache wie PHP umsteigen, wenn man bereits was anderes kann?

Vielleicht habt ihr ja auch ein paar Buch/Magazin/Blog Tipps für mich.

http://www.smashingmagazine.com/
http://tutsplus.com/
http://davidwalsh.name/
http://alistapart.com/

Und viele mehr. Halte lieber Ausschau nach solchen Seiten als nach Büchern, denn Bücher sind in dieser Branche schnell wieder veraltet.

 

[GrooveXT]

Danke für deine ausführliche Antwort.

Tatsächlich ist es eher so, dass du hier tatsächliche Standards hast, und zwar offene. Das ist nicht wie bei Silverlight/Flash, wo dir ein proprietärer Hersteller diktiert, wie du es machen musst und wie SEINE proprietären Plugins das dann darstellen.
Hier entscheidet ausschließlich die W3C-Spezifikation.

Ich meinte hier auch weniger den Standard der Sprache sondern das Vorgehen. So wie ich das sehe gibts es bei der Web-Entwicklung zwar HTML5/CSS/Javascript als Standard, aber das hat mehr Ähnlichkeit mit Assembler. Effektiv "Benutzbar" wird das Ganze erst durch verschiedene Frameworks und da bricht irgendwie alles über einem zusammen.

Wer HTML/CSS in einem WYSIWYG-Editor schreibt, der hat schon verloren.

Klingt immer mehr nach Assembler. Gibts da wirklich nichts? Das ist ja ein endloses Trial and Error bis man das Design halbwegs da hat wo es hin soll.

Was man eben beherrscht und was der spezifischen Aufgabe angemessen ist. Grundsatz: Es gibt nichts, was PHP nicht lösen kann. Es gibt nur Sachen, die z.B. Java oder node.js performanter oder einfacher lösen können.

Also Node.js wäre ein Serverseitiges JS Framework? Gibts sowas überhaupt? Kann ich damit Dateien auf dem Server ablegen oder REST Service anbieten?


Vielen Dank nochmal.

Achja und was wäre eine gute IDE? Und jetzt komm mir nicht mit nem Texteditor

@Speedy
Auch dir schon mal vielen Dank. Vor allem für die nützlichen Links, werde ich mir mal zu Gemüte führen.

 

[SaxnPaule]

Ich musste notgedrungener Weise auch von Java auf JS umsteigen und mir erging es anfangs genauso wie dir. Alles so ungeordnet....

Nach ein paar Monaten hat man sich aber eingewöhnt und es finden sich immer mehr Dinge, wo es auch von Vorteil sein kann JS zu nutzen.

Als IDE kann ich WebStorm empfehlen. WYSIWYG für Frontends ist, wie bereits erwähnt, Selbstmord. Lieber ein gescheites Konzept erstellen und von Hand erstellen und pflegen, dass erhöht die Wartbarkeit deutlich.

 

[Yuuri]

Effektiv "Benutzbar" wird das Ganze erst durch verschiedene Frameworks und da bricht irgendwie alles über einem zusammen.

CSS Frameworks sind schlimm. Bringen dir vielleicht ein paar nützliche Sachen, schleppen aber haufenweise Ballast mit sich herum, die du so gar nicht brauchst. Auch hilft dir ein Framework nicht eigene Regeln zu definieren. Nur weil du ein Framework nutzt, wird der Einsatz dadurch ebenso nicht benutzbarer. Deine eigenen Regeln im CSS musst du schon selbst definieren.

Klingt immer mehr nach Assembler. Gibts da wirklich nichts? Das ist ja ein endloses Trial and Error bis man das Design halbwegs da hat wo es hin soll.

Mit Assembler hat das nichts zu tun. HTML und CSS sind nun mal Markupsprachen. Vergleiche es mit XML, aber Assembler ist ein sinnloser Vergleich. Trial & Error ist es nur, wenn du Anfänger bist. Mit ein bisschen Erfahrung machst du ein komplettes (ordentliches) Layout in wenigen Stunden (je nach Komplexität natürlich auch weniger).

Also Node.js wäre ein Serverseitiges JS Framework?

Ja, aber ich bezweifel, dass es einen PDF-Parser auf JS-Basis gibt. Dafür gibts in anderen Sprachen nämlich sehr viele Libs und das ist auch nicht der Einsatz von Node.js.

Achja und was wäre eine gute IDE? Und jetzt komm mir nicht mit nem Texteditor

PhpStorm/WebStorm, Aptana, VS.Php, PhpEd, Eclipse + PDT, ... Und ja, das besteht alles aus einem "erweiterten Texteditor". Da gibts keine GUI zum Rumklicken, denn ordentliches Markup kommt dort nicht heraus.

Einen Rat: Bastel erstmal ein wenig an HTML, CSS und JS herum, anstatt hier gleich mit Kalibern wie Frameworks, IDEs u.ä. um sich zu schmeißen.

 

[Speedy.]

Ich meinte hier auch weniger den Standard der Sprache sondern das Vorgehen. So wie ich das sehe gibts es bei der Web-Entwicklung zwar HTML5/CSS/Javascript als Standard, aber das hat mehr Ähnlichkeit mit Assembler. Effektiv "Benutzbar" wird das Ganze erst durch verschiedene Frameworks und da bricht irgendwie alles über einem zusammen.

Es gibt viele Wege zum Ziel und kommt auf dein Wissen und deine Erfahrung an. Frameworks sind kein Muss, sie machen viele Sachen für den Entwickler nur einfacher und vor allem schneller. Viele greifen halt zu Frameworks, weil man damit seinen eigenen Code erheblich verringern kann und weniger Zeit investieren muss.

Klingt immer mehr nach Assembler. Gibts da wirklich nichts? Das ist ja ein endloses Trial and Error bis man das Design halbwegs da hat wo es hin soll.

Auch hier gilt: Erfahrung und Können. In der Regel weißt du schon im Voraus, wie deine Seite, dein Layout, aussehen soll. Entweder, weil du eine konkrete Idee im Kopf hast oder der Designer dir eine Vorlage erstellt hat, die du stur in Code umsetzt. Und dann weißt du schon, welche HTML-Elemente wo hinkommen, wie sie sich auswirken, ob sie semantisch sind oder nicht. Außerdem weißt du, mit welchen CSS-Eigenschaften du runde Ecken bekommst und einen Rahmen und ein Element zauberst. Für Anfänger mag das nach Trail & Error aussehen, aber nur so lernt man es richtig. WYSIWYG-Editoren können weder HTML noch CSS richtig gut und hauen dir meist eine Codesuppe heraus, die wenig feierlich ist. Ein Programm weiß eben nicht, wann ein <article> semantisch korrekt ist und wann nicht, dass weiß nur ein erfahrener Entwickler.

Also Node.js wäre ein Serverseitiges JS Framework? Gibts sowas überhaupt? Kann ich damit Dateien auf dem Server ablegen oder REST Service anbieten?

Kurz: ja. Node.js bietet die seltene Möglichkeit, JS serverseitig zu schreiben. Natürlich ist es selbst nicht in JS, sondern in C++ geschrieben, aber im Grunde schreibst du JavaScript Dateien und legst diese in dein Verzeichnis auf dem Server, wo diese dann ausgeführt werden.

 

[Daaron]

Bei kleineren Projekten sehe ich es nicht ein, 80 KB zusätzliches JavaScript über die Leitung zu schieben und auszuführen, nur um ein Element aus/einzublenden.

Na ja, das muss man auch relativieren. Der clevere Entwickler verwendet für Frameworks und Schriften CDNs, allen voran das Google CDN. Dadurch ist es quasi garantiert, dass dein Besucher die Ressourcen eh schon von anderen Seiten her im Cache hat.

Effektiv "Benutzbar" wird das Ganze erst durch verschiedene Frameworks und da bricht irgendwie alles über einem zusammen.

Nö, keineswegs.
Am Anfang steht HTML. Damit schreibst du auf, WAS du aussagen willst, pure Semantik. Darüber packst du CSS, dass dem ganzen ein ansprechendes Äußeres gibt. Ganz zum Schluss schnappst du dir JS für die Programmlogik und all die Styling-Tricks, die CSS eben (noch) nicht kann.

Klingt immer mehr nach Assembler. Gibts da wirklich nichts? Das ist ja ein endloses Trial and Error bis man das Design halbwegs da hat wo es hin soll.

Bestenfalls https://www.google.com/webdesigner/ ist einen Blick wert, aber der Einsatzbereich ist arg eingeschränkt.
Und nein, es ist kein Trial & Error. Es ist vielmehr schlichtweg ein Lernprozess. Du erwartest doch wohl nicht, dass du in 20 Minuten das auf die Beine stellst, was ein Profis sich in mehreren Jahren Praxis angeeignet hat?

Also Node.js wäre ein Serverseitiges JS Framework? Gibts sowas überhaupt? Kann ich damit Dateien auf dem Server ablegen oder REST Service anbieten?

Ja, ja, ja und ja... Lies das Handbuch & mach ein paar Tutorials, damit bist du ein paar Wochen oder Monate beschäftigt.

Achja und was wäre eine gute IDE? Und jetzt komm mir nicht mit nem Texteditor

Doch, tu ich. Du brauchst dafür keine IDE, sondern lediglich einen guten Editor mit Syntax Highlighting. Ich arbeite, was HTML/CSS/JS angeht, ausschließlich in Geany oder, wenn es nur Kleinigkeiten sind, im Vim. Ich hab ne halbe Webseite geschrieben, bevor eine komplexe IDE wie Netbeans oder Eclipse überhaupt erst einmal geladen hat.

 

[GrooveXT]

Wowwow. Ich wollte mit meinem Assembler Vergleich keinen kränken

In Jahr 2014 wo man GUIs für Desktop Anwendungen innerhalb von 15 Minuten komplett zusammen klickt, fühle ich mich durch ein stundenlanges Handtieren mit zig HTML, CSS und JS Files doch irgendwie an die guten alte Assembler Zeiten erinnert. Es geht mir nur um den Vergleich mit dem Umgang nicht mit dem Funktionsumfang oder Möglichkeiten.

Ich hatte halt gehofft das es irgendeinen "einfachen" Weg in die Programmierung gibt wo man nicht erstmal ein halbes Jahr rumspielt um dann die erste halbwegs vernünftige Anwendung hinzulegen. Bei Silverlight hatte ich nach 3 Monaten schon eine komplett fertige Anwendung, die wir produktiv einsetzen konnten. Und sowas suche ich halt auch für HTML5/CSS.

Zur IDE:
Ich weiß für "Hardcore" Web-Programmierer sind IDEs ein Grauss, aber für den "normalen" Entwickler Alltag, wo Termine und Ziele eingehalten werden müssen, wo auch mal 10 Mann an einem Projekt arbeiten, wo es Code Reviews und großflächiges Refaktoring gibt, wo in letzter Minuten der Kunde noch enorme Änderungen haben will, da kommt man um eine ordentlich IDE nun mal nicht rum.
Kann ich mit einem Texteditor ein umfangreiches Refaktoring vornehmen? Wie Debugge ich mit einem Texteditor? Kann ein Texteditor mich bei einem Code Review unterstützen? Wie finde ich Hierarchien und Usages? Wie finde ich Implementierungen und Definitionen?
Das sind alles Funktionen die ich mir nicht mehr weg denken kann und die mir schon Wochen an Arbeit gespart haben. Deshalb bevorzuge ich eine IDE. Zumal CodeCompleton gerade zu Anfang enorm hilft. Ich werde wohl ne Zeit brauchen um alle Funktionen intus zu haben und da ist sowas extrem hilfreich.

@SaxnPaule
WebStorm sticht mir auch sehr ins Auge. Habe schon sehr gute Erfahrungen mit IntelliJ. Bin mir aber noch nicht sicher was der Unterschied zu PHPStorm ist.

 

[ice-breaker]

CSS Frameworks sind schlimm. Bringen dir vielleicht ein paar nützliche Sachen, schleppen aber haufenweise Ballast mit sich herum, die du so gar nicht brauchst. Auch hilft dir ein Framework nicht eigene Regeln zu definieren. Nur weil du ein Framework nutzt, wird der Einsatz dadurch ebenso nicht benutzbarer. Deine eigenen Regeln im CSS musst du schon selbst definieren.

So Frameworks wie Bootstrap helfen aber einem Anfänger viel schneller auch etwas hübsches auf den Bildschirm zu bringen

 

[Daaron]

In Jahr 2014 wo man GUIs für Desktop Anwendungen innerhalb von 15 Minuten komplett zusammen klickt, fühle ich mich durch ein stundenlanges Handtieren mit zig HTML, CSS und JS Files doch irgendwie an die guten alte Assembler Zeiten erinnert.

Die Sache ist ganz einfach. HTML, insbesonder HTML5, implementiert SEMANTISCHES Markup. Maschinen können Semantik zwar begrenzt verstehen, aber nicht erzeugen. Dein WYSIWYG-Editor würde dir eine heillose <div>-Suppe hinklatschen, die einfach gar keinen Sinn macht. Auch bei CSS-Deklarationen ist jede Software einem Menschen um Lichtjahre unterlegen. Die Dinger erzeugen einfach keine sauberen Selektoren, sondern schlimmstenfalls entweder zu spezifische (also schreibst du alles 100x) oder zu allgemeine (und zu zerschießt alles).
Und spätestens wenn es um JS geht bist du an dem Punkt "Programmlogik". Zeig mir ein Programm, dass selbsttätig Programme schreiben kann... wenn du das kannst, kannst du als nächstes nach Stockholm fahren und dir ne Millionen abholen.

Bei Silverlight hatte ich nach 3 Monaten schon eine komplett fertige Anwendung, die wir produktiv einsetzen konnten. Und sowas suche ich halt auch für HTML5/CSS.

Du kannst doch nicht Silverlight mit HTML/CSS/JS vergleichen. HTML5/CSS3 sind sogar Turing-Vollständig...

Ich weiß für "Hardcore" Web-Programmierer sind IDEs ein Grauss, aber für den "normalen" Entwickler Alltag, wo Termine und Ziele eingehalten werden müssen, wo auch mal 10 Mann an einem Projekt arbeiten, wo es Code Reviews und großflächiges Refaktoring gibt, wo in letzter Minuten der Kunde noch enorme Änderungen haben will, da kommt man um eine ordentlich IDE nun mal nicht rum.

Schwachfug. Das mag bei der Backend-Logik gelten. Ich schreib PHP auch in Eclipse. Für HTML/CSS ist das aber totaler Schwachfug. Hier gibt es keine Kreuzreferenze zwischen Dateien. Es gibt keinen sinnvollen Einsatz für Autocomplete. Die Spezifikationen von HTML5 und CSS3 erweitern sich quartalsweise.

Kann ich mit einem Texteditor ein umfangreiches Refaktoring vornehmen? Wie Debugge ich mit einem Texteditor? Kann ein Texteditor mich bei einem Code Review unterstützen? Wie finde ich Hierarchien und Usages? Wie finde ich Implementierungen und Definitionen?

Nichts davon spielt für HTML und CSS eine Rolle. Du betreibst kein Refactoring, wie du es aus Java kennst. Aber ja, manche Editoren sind so intelligent, dass du, wenn du ein öffnendes <div> in ein <article> änderst, sich auch das zugehörige </div> in </article> ändert. Debuggt wird, indem du deinen BROWSER verwendest. Der bietet alles, was du benötigst. Er bietet sehr komplexe Werkzeuge, die nur für professionelles Webdesign geschaffen wurden.

So Frameworks wie Bootstrap helfen aber einem Anfänger viel schneller auch etwas hübsches auf den Bildschirm zu bringen

Und er lernt dabei... nichts.
Zwar ist Bootstrap deutlich besser als andere CSS Frameworks, die mir über den Weg gelaufen sind, aber auch Bootstrap verzapft eine Menge Grütze. Es fängt ja schon bei den pixel-basierten Definitionen für Zeilenhöhen, Schriftgrößen und vor allem Margins/Paddings an... Änder mal bei Bootstrap die Basis-Schriftgröße und in Abhängigkeit davon alle Abstände über/unter Absätzen und Überschriften.
Das sind elementare Anforderungen, oder hast du noch nie eine Seite mit "vergrößere/verkleinere Schrift" - Schaltern gesehen?

 

[GrooveXT]

Die Sache ist ganz einfach. HTML, insbesonder HTML5, implementiert SEMANTISCHES Markup. Maschinen können Semantik zwar begrenzt verstehen, aber nicht erzeugen. Dein WYSIWYG-Editor würde dir eine heillose <div>-Suppe hinklatschen, die einfach gar keinen Sinn macht. [...]

Jetzt überspitz mal nicht den Begriff WYSWIG. Ich will keine intelligente Maschine die mir mein Programm schreibt, ich will bloß einen Editor der mir sofort das Ergebnisse meine Bemühung anzeigt. Erhöhe ich im CSS die Breite eines Elements will ich sofort sehen wie die Website dazu aussieht. Eventuell wäre es schön wenn ich auf ein UI Element klicken kann und per Context z.B. die Farbe ändere. Mehr macht Visual Studio an der Stelle auch nicht. Und dafür brauche ich hoffentlich keine künstliche Intelligenz in voller Ausbaustufe.

WYSIWYG ist das Akronym für den Grundgedanken „What You See Is What You Get“ (englisch für „Was du siehst, ist [das,] was du bekommst.“) – auch als Echtbilddarstellung bekannt.[1] Bei echtem WYSIWYG wird ein Dokument während der Bearbeitung am Bildschirm genauso angezeigt, wie es bei der Ausgabe über ein anderes Gerät, z. B. einen Drucker, aussieht. Der Begriff wurde zuerst Anfang der 1980er im Zusammenhang mit Computer-Drucksatz-Systemen (Desktoppublishing) und Textverarbeitungsprogrammen verwendet.

Du kannst doch nicht Silverlight mit HTML/CSS/JS vergleichen. HTML5/CSS3 sind sogar Turing-Vollständig...

HTML5/CSS sind alleine nicht Turing Vollständig, erst im Zusammenspiel mit JS kann man von einer Turing Vollständigkeit sprechen, sofern man bei einem PC mit begrenztem Speicher überhaupt von Turing Vollständigkeit reden kann. Davon kaufen kann man sich nichts. Auch Assembler ist Turing Vollständig, eine GUI damit schreiben möchte ich trotzdem nicht. Mir gehts rein um den pragmatischen Ansatz und nicht den philosophischen.

Schwachfug. Das mag bei der Backend-Logik gelten. Ich schreib PHP auch in Eclipse. Für HTML/CSS ist das aber totaler Schwachfug. Hier gibt es keine Kreuzreferenze zwischen Dateien. Es gibt keinen sinnvollen Einsatz für Autocomplete. Die Spezifikationen von HTML5 und CSS3 erweitern sich quartalsweise.

Es sollte wohl klar sein, dass ich nicht von HTML und CSS rede sondern von JavaScript und dem Ganzen drum herum. Das ich für HTML keinen Debugger brauche ist mir schon klar. Aber wenn man nur mit HTML und CSS effinzient eine komplette Webanwendung schreiben könnte bräuchten wir hier gar keine Diskussion führen.

 

[Yuuri]

Erhöhe ich im CSS die Breite eines Elements will ich sofort sehen wie die Website dazu aussieht. Eventuell wäre es schön wenn ich auf ein UI Element klicken kann und per Context z.B. die Farbe ändere.

F5 im Browser -> fertig. Für alles andere gibts die erwähnten Entwicklertools in allen gängigen Browsern (meistens durch F12 geöffnet).

Aber wenn man nur mit HTML und CSS eine komplette Webanwendung schreiben könnte brauchte wir hier gar keine Diskussion führen.

Kannst du auch mit JS allein nicht. Ne serverseitige Sprache ist immer erforderlich.

 

[Daaron]

Erhöhe ich im CSS die Breite eines Elements will ich sofort sehen wie die Website dazu aussieht.

Rechtsklick -> Element untersuchen.... Schon kannst du alles in Echtzeit manipulieren.

HTML5/CSS sind alleine nicht Turing Vollständig

Falsch.
Man kann in reinem HTML5/CSS einen Rule 110 - Automaten bauen. Da Rule 110 erwiesenermaßen Turing-Complete ist...

Es sollte wohl klar sein, dass ich nicht von HTML und CSS rede sondern von JavaScript und dem Ganzen drum herum. Das ich für HTML keinen Debugger brauche ist mir schon klar. Aber wenn man nur mit HTML und CSS effinzient eine komplette Webanwendung schreiben könnte bräuchten wir hier gar keine Diskussion führen.

Du brauchst auch für den Löwenanteil an JS keine IDE, du brauchst kein Refactoring,..... So etwas würde auch schlichtweg nicht funktionieren, da du in JS viele Sachen machen kannst (und wirst), die einer Maschine schlichtweg den Kopf verdrehen.
Außerdem, um JS zu debuggen, braucht es nicht viel. Du brauchst einen modernen Browser und du brauchst console.log("Hier Wert eintragen");

 

[GrooveXT]

Du brauchst auch für den Löwenanteil an JS keine IDE, du brauchst kein Refactoring,..... So etwas würde auch schlichtweg nicht funktionieren, da du in JS viele Sachen machen kannst (und wirst), die einer Maschine schlichtweg den Kopf verdrehen.
Außerdem, um JS zu debuggen, braucht es nicht viel. Du brauchst einen modernen Browser und du brauchst console.log("Hier Wert eintragen");

Oh Gott, so habe ich das letzte mal mit Turbo Pascal gearbeitet. Debugging per Log.... Verändern von Parametern im Browser und danach erst manuell in den QuellCode übernehmen? Kein Refactoring? Das soll's sein? Komm schon, dass ist doch kein Workflow.

Ich werde mir mal WebStorm ansehen.

 

[Daaron]

Doch, genau das isses. Schreib doch erst einmal irgend ein kompaktes Projekt, um ein Gefühl für den Workflow zu bekommen.

 

[Yuuri]

Oh Gott, so habe ich das letzte mal mit Turbo Pascal gearbeitet. Debugging per Log....

Du kannst per Logging debuggen, du kannst aber auch den Debugger in den Dev Tools nutzen. Bitte geh doch nicht immer vom Schlimmsten aus. Für kleine Sachen, um gewisse Werte zu überprüfen, schmeißt du keinen Debugger an (bzw. setzt höchstens kurz den Breakpoint an einer Stelle). Wenn du aber bspw. an svg-edit rumschraubst, Funktionalität einbringst, es anpasst und debuggen musst, musst du einen Debugger verwenden, denn ohne siehst du im Dschungel von 500 kB reinem JS-Code (180 kB minimiert) keinen Stich mehr.

Mit PhpStorm (und WebStorm?!) kannst du afaik auch JS in der IDE debuggen, musst allerdings Chrome und ein Plugin installiert haben.

Verändern von Parametern im Browser und danach erst manuell in den QuellCode übernehmen?

Geht bei CSS wunderbar. Genau da hast du dein WYSIWYG, was du ja unbedingt haben willst: Bearbeiten, Live-Ansicht und wenn es dir so gefällt, kannst du es in den Code übernehmen. Zusätzlicher Vorteil: Mit nem ordentlichen Deployment minimierst du jeglichen Code und hast hierbei noch allerlei Vorteile von kleinen Dateigrößen, wenigen Requests u.ä.

Kein Refactoring?

Du kannst Refactoring mit JS-Code betreiben, es ist durch die dynamische Typisierung plus extremen Designschwächen aber nahezu unmöglich dateiübergreifend irgendwas korrekt zu erledigen. Wenn du Typsicherheit haben und Refactoring nutzen willst, sieh dir TypeScript an oder warte auf ECMAScript 6. Es ist teilweise ein echter Segen für nen "anständigen" Programmierer. Allerdings hast du hier natürlich das Problem, dass für jQuery Plugins so gut wie nie Typdefinitionen existieren. Ergo kannst du bei sowas auch gleich bei JS bleiben.

Das soll's sein?

Wie Daaron nun und ich schon schrieben: Probier es doch erstmal aus, anstatt hier ein Fass auf zu machen. Eh du den Debugger (sinnvoll) verwendest, werden einige Monate vergehen, denn bevor du komplexe Probleme angehen kannst, vergeht einige Zeit. C#/Java/C++ und PHP/HTML/CSS/JS sind komplett verschiedene Welten. Schön dass du die Sprache kannst, die Konzepte und Herangehensweisen der jeweiligen Plattformen beherrschst du aber nicht in wenigen Tagen oder Wochen.

Weißt du denn aus dem Stehgreif wie Ajax-Requests funktionieren? WebSockets und ähnliche Scherze? Bevor du da also den Debugger anwirfst, wird einige Zeit vergehen. Beim Rumschubsen von DOM-Nodes brauchst du keinerlei Debugger, das geht mit CSS 3 bereits sehr gut von der Hand weg und sollte auch so weit wie möglich nur per CSS umgesetzt werden.

Ich hab jetzt einige Jahre sehr viel in PHP gemacht und wenn ich mich nun sofort an WPF setzen müsste (habe vorher nur per WinForms gearbeitet), müsste ich mich genauso erst ins System reinfriemeln (bzw. bin ich grad dabei ein Projekt umzusetzen). Hab vorher nur per WinForms seit VS2008 mit C# gearbeitet.

Und bitte versteif dich nicht dauerhaft auf JS. JS ist nett und JS ist mächtig, wenn man es denn ordentlich beherrscht, aber JS ist kein Allheilmittel, krankt an extrem vielen Stellen (keine Klassen, keine Vererbung, alles in Funktionen gekapselt, Access modifier gibts nicht, non-/static gibts nicht, ...), es gibt kaum ordentliche Plattformen bzw. Hoster dafür, ...

 

[T0a5tbr0t]

Wenn du vernünftig JavaScript lernen willst, guck dich mal da um: http://jsbooks.revolunet.com/
Da sind Bücher zu bekannten Bibliotheken / Frameworks aber auch zu JavaScript an sich. Für komplexere Anwendungen ist da z.B. JavaScript Design Patterns interessant.

Und mal nebenbei: jQuery / Mootools sind keine Frameworks sondern Bibliotheken. Die machen den DOM schöner, helfen aber nicht viel beim Code selber. Da hilft eigentlich nur ordentlich Ahnung von JavaScript. Man muss halt lernen ohne Klassen zu Arbeiten und die Flexibilität von JavaScript nutzen. Dadurch gibt es viele Refactoring Probleme erst garnicht.

Zum ursprünglichen Problem: Es gibt durchaus gute PDF renderer in JavaScript. Der bekannteste ist da wohl pdf.js von Mozilla. Im Grunde malt der PDF's in Canvas Elemente. Und aus dem Canvas könnte man dann ein Bild machen. Das würde im Browser und auf Serverseite laufen.