Angular 2 first impression



  • Since I already know react, and a greenfield frontend project might be on the horizon, I'm playing a bit with angular 2. Yes I know, I should use IE6 compatible code with full noscript support, yadda yadda. Spare me the lecture.

    First impression of their very first quickstart tutorial:

    0_1462306335527_upload-3a4f346a-e27d-478c-b9c3-af1943ac029d

    0_1462306361758_upload-e77bdc8f-b4bc-4e18-b75a-c9ac2c81cfbb

    0_1462306372836_upload-95ddd5b1-0885-49f4-9b9c-f4ced1265116

    Ooops, that's the wrong syntax for HTML comments there, guys. A good thing to keep in mind when making a frontend framework. Just saying.

    That's all I have for now. Since the rest of the framework will surely be reasonable and problem-free, surely I'll have nothing else to post in this thread. Surely.



  • @cartman82 said in Angular 2 first impression:

    Since I already know react, and a greenfield frontend project might be on the horizon, I'm playing a bit with angular 2. Yes I know, I should use IE6 compatible code with full noscript support, yadda yadda. Spare me the lecture.

    First impression of their very first quickstart tutorial:

    0_1462306335527_upload-3a4f346a-e27d-478c-b9c3-af1943ac029d

    0_1462306361758_upload-e77bdc8f-b4bc-4e18-b75a-c9ac2c81cfbb

    0_1462306372836_upload-95ddd5b1-0885-49f4-9b9c-f4ced1265116

    Ooops, that's the wrong syntax for HTML comments there, guys. A good thing to keep in mind when making a frontend framework. Just saying.

    That's all I have for now. Since the rest of the framework will surely be reasonable and problem-free, surely I'll have nothing else to post in this thread. Surely.

    Perfect line-o-code type of sample for why I run THE-FUCK-AWAY from frontend ANYTHING

    0_1462307449969_ponyNope.jpg



  • @Vaire Uff, don't tell me you're a bronad too.



  • @Captain said in Angular 2 first impression:

    @Vaire Uff, don't tell me you're a bronad too.

    Why do people keep assuming I am a "bro"?o_O
    Also, ponies are damn cute. Join us! JOOOOOIN UUUUS!
    0_1462310596240_ponyBorg.jpg



  • @Vaire Your icon is Kermit the Frog, the manliest of all puppets.



  • Ok, ok, that's enough. Keep your goddamn girly cows out of my angular thread. There's serious business afoot here.



  • @blakeyrat said in Angular 2 first impression:

    @Vaire Your icon is Kermit the Frog, the manliest of all puppets.

    But ... kermie is funny ... :sadface:
    I could make it an anime lass, or my hero LiSA I suppose, but then I will get all the "LOL-JPOP iz t3h sux0rz" hate :(


  • Discourse touched me in a no-no place

    @Vaire said in Angular 2 first impression:

    Why do people keep assuming I am a "bro"?

    You do use a lot of brony macros.

    Of course, you've got that Two Broke Girls one you use a lot too, but I don't see people saying you love that show. Go figure.



  • @FrostCat said in Angular 2 first impression:

    @Vaire said in Angular 2 first impression:

    Why do people keep assuming I am a "bro"?

    You do use a lot of brony macros.

    Of course, you've got that Two Broke Girls one you use a lot too, but I don't see people saying you love that show. Go figure.

    I actually don't love that show. But I like Kat Dennings, she's ... sassy <3


  • Discourse touched me in a no-no place

    Would something like Angular be suitable for a website that basically showed reports?



  • @FrostCat said in Angular 2 first impression:

    @Vaire said in Angular 2 first impression:

    Why do people keep assuming I am a "bro"?

    You do use a lot of brony macros.

    Of course, you've got that Two Broke Girls one you use a lot too, but I don't see people saying you love that show. Go figure.

    And hey, RaceProUK uses ponies, and ya'll don't pick on her :harumph:



  • @FrostCat said in Angular 2 first impression:

    Would something like Angular be suitable for a website that basically showed reports?

    Does it have to be a SPA? If yes, then sure. If not, then NO!


  • Discourse touched me in a no-no place

    @Vaire said in Angular 2 first impression:

    And hey, RaceProUK uses ponies, and ya'll don't pick on her

    Difficult to do that past all the hedgehog spines.



  • @dkf said in Angular 2 first impression:

    @Vaire said in Angular 2 first impression:

    And hey, RaceProUK uses ponies, and ya'll don't pick on her

    Difficult to do that past all the hedgehog spines.

    And fox bites? :3



  • @FrostCat said in Angular 2 first impression:

    Would something like Angular be suitable for a website that basically showed reports?

    Angular and SPA-s in general are a good choice if:

    • Your project is an application (as opposed to website), behind a login wall, with no SEO concerns.
    • It has live updates, with multiple widgets to keep in sync
    • It has more than one page/view

    Unless your reports app satisfies all 3 of these, probably don't bother.

    At least not with a full SPA framework. If you only need to sync live updates, you can do just react or knockout, without the router and other crud.


  • Impossible Mission Players - A

    @Vaire I find that @accalia's bark is worse than her bite :rimshot:



  • @izzion said in Angular 2 first impression:

    @Vaire I find that @accalia's bark is worse than her bite :rimshot:

    This pleases us.
    0_1462311641508_whosAwesome_anime.jpg



  • Hello world angular2 project, using a yeoman generator.

    $ find . -name node_modules -type d -exec find {} -maxdepth 1 -type d ! -name node_modules \; | wc -l
    822
    
    $ find node_modules -name '*.js' | wc -l
    18893
    

    800+ modules with almost 20K source files.

    This is just to set up a gulp build system for a project that outputs a single <h1> tag on the screen.



  • I like js more than any reasonable person should but I can't get over the all the buzzword bullshit that goes along with these tools. If you can't describe your shit without channeling some PR monkey it makes me think you really don't have anything of value to offer.

    Related, I was no familiar with yeoman so I looked it up. I got this far before I wanted to murder someone:

    To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the yo command to scaffold complete projects or useful parts.



  • @fwd yo better_forum_software


  • SockDev

    @izzion said in Angular 2 first impression:

    I find that @accalia's bark is worse than her bite

    you've heard my bark, i'll grant you that.... but honey, it ain't got NOTHING on my bite.

    :-P



  • @fwd said in Angular 2 first impression:

    To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the yo command to scaffold complete projects or useful parts.

    This is just a way to quickly set up one of these SPA projects. I'm not a huge fan, but it's useful when trying out new things or just to get an idea what sort of build systems are out there.


  • Impossible Mission Players - A

    @accalia said in Angular 2 first impression:

    honey, it ain't got NOTHING on my bite.

    :giggity:


  • SockDev

    @accalia said in Angular 2 first impression:

    but honey, it ain't got NOTHING on my bite.

    0_1462315985196_Ooh Matron!.jpg


  • Discourse touched me in a no-no place

    @Vaire said in Angular 2 first impression:

    Does it have to be a SPA? If yes, then sure. If not, then NO!

    It's not now, it's an old Classic ASP three-frame thing. I would like to redo it in...probably ASP.Net, but that's as far as I've carried the idea so far.


  • Discourse touched me in a no-no place

    @accalia said in Angular 2 first impression:

    my bite.

    I think we've had this conversation before. Two words: chainmail. leggings.


  • SockDev

    @FrostCat said in Angular 2 first impression:

    chainmail. leggings.

    Come on, it's the 21st century: use Kevlar!


  • Discourse touched me in a no-no place

    @RaceProUK That doesn't sound nearly as silly.



  • /suscribe

    i'm currently trying to make a multi-page app with react.
    at first we went with gulp but ended changing it for webpack, because it was a lot less PITA to set up (yes, i know what i said about it less than a month ago) .

    related question: is there a migration path? or are they going to do the "python 2-3" way were you end up with half the ecosystem in each version?



  • @Jarry said in Angular 2 first impression:

    i'm currently trying to make a multi-page app with react.
    at first we went with gulp but ended changing it for webpack, because it was a lot less PITA to set up (yes, i know what i said about it less than a month ago) .

    I kind of like the idea and ideology behind gulp, but once its neat design hits reality, it usually falls apart. Webpack is an ugly disgusting beast, but it gets the job done.

    related question: is there a migration path? or are they going to do the "python 2-3" way were you end up with half the ecosystem in each version?

    If you're talking about migration from angular 1 to 2, last time I looked into it, there was nothing. Haven't heard anything different so far.

    I find it amazing people still launch fresh angular 1 apps today. But then again, they also start new python 2 projects, and that's even worse in some respects.



  • 0_1462395558128_upload-b7b86475-5bfb-4090-a953-6649f16f7075

    "Hahaha, stupid noob. Looking at the console in vein, expecting the framework to warn you about the baffling unintuitive thing it just did."


  • Impossible Mission Players - A

    @cartman82 Obviously the proper answer is to look at the console in artery, see the framework's messages on the way out instead of the way back. :trolleybus:



  • @cartman82 said in Angular 2 first impression:

    vein

    Either that should be 'vain' or you should see a doctor about your console abuse.



  • At work we have taken the "courageous" decision that Angular 2 is going to be used for our front end strategy from here on in, and we've done some basic, largely self led training...

    It seems nice, I love the components based approach, but I really don't love javascript. There are no words to adequately convey how much I don't love javascript. Sadly of course the tide is against me, and I suppose we have typescript as a semi-compromise, but yuck... I also do some work on an open source project which is purely ASP.Net MVC - and I have to say I think that is where my heart truly lies.

    One thing Angular 2 has got which interested me greatly was the idea of going on to use it with Cordova to generate applications for mobile platforms. Not such an appealing prospect though now that we learn Microsoft are going to be giving Xamarin away for free...



  • @Jarry Funny, I'm working on that too. Got the webpack stuff working, currently trying to get the React Router working. Naturally, I set everything up like the example, and the Link element works, but when I click the link, the URL bar changes, but it doesn't show the element that the related Route tag says.

    Thinking it might have something to do with the <base/> tag in the <head>, which I removed to clear some errors, but I think it needs something to replace it maybe? Or maybe I have something configured wrong.

    Edit - Oh, I get it now. If the React routes are nested, then the child routes render in the parent's {this.props.children}. It only replaces the whole page if they're at the same level.



  • @cartman82 said in Angular 2 first impression:

    I kind of like the idea and ideology behind gulp, but once its neat design hits reality, it usually falls apart. Webpack is an ugly disgusting beast, but it gets the job done.

    QFT

    @cartman82 said in Angular 2 first impression:

    I find it amazing people still launch fresh angular 1 apps today.

    as usual, it depends, stability at the cost of being outdated or new features and the ocasional bleeding edge cut? pick your poison



  • @cartman82 said in Angular 2 first impression:

    If you're talking about migration from angular 1 to 2, last time I looked into it, there was nothing. Haven't heard anything different so far.

    I thought they had a page saying how you could combine 1 and 2 on the same page and convert components one at a time. Yup, it's here

    I find it amazing people still launch fresh angular 1 apps today. But then again, they also start new python 2 projects, and that's even worse in some respects.

    Suppose I can see it, when 1 is stable and widely used and has a ton of accessories and the team already knows it, while nobody knows 2, either on your team or in the rest of the world, there's probably no accessories, and then you have to figure out how to set up a process that uses Typescript I guess. I was going to take a poke at Angular 2 after I've messed with React for a bit.



  • I built an application using Beta 2.0 a few months ago. Angular 2 for the most part seemed nice to work with. The huge number of JS files worried me. I suspect that a lot of this is debugging bits and pieces, however I haven't prepped a release for production yet.

    Having looked over the RC it looks much more complete, but of course upgrading between beta 2 and the RC is going to be painful.

    My main complaint with beta 2 was that a lot of the libraries the project depended on we mentioned in the main tutorial and FAQ, but you were expected to know what they did and how they already worked with no link to the project documentation in any particular doc.

    The main problem I have with TypeScript is that while it is "compiled", when the project does the auto-reload and fires up the compiler half the compile messages have scrolled out of view. The app gleefully carries on loading even with "compile" errors.

    When using it with VS2015 and the inbuilt task runner tooling it used to get to a situation where my (i7 machine) was totally maxed out. Also VS 2015 seemed to try to use the version of typescript that was installed in C:\Program Files\ rather than what was installed via the npm init script. So I couldn't just use build in VS2015.


  • I survived the hour long Uno hand

    @ufmace said in Angular 2 first impression:

    Naturally, I set everything up like the example, and the Link element works, but when I click the link, the URL bar changes, but it doesn't show the element that the related Route tag says.

    This sentence exemplifies everything that's wrong with modern web dev.


  • SockDev

    @ufmace said in Angular 2 first impression:

    Naturally, I set everything up like the example, and the Link element works, but when I click the link, the URL bar changes, but it doesn't show the element that the related Route tag says.

    And that's why I don't use client-side MVC frameworks. That, and they're massive overkill for what I need to do; jQuery is easily enough for my needs.


  • Winner of the 2016 Presidential Election

    @Yamikuronue said in Angular 2 first impression:

    Naturally, I set everything up like the example, and the Link element works, but when I click the link, the URL bar changes, but it doesn't show the element that the related Route tag says.

    This sentence exemplifies everything that's wrong with modern web dev.

    QFFT. All I read is "guys, we just reinvented the hyperlink in the most buggy, unintuitive and overly complicated way".


  • Winner of the 2016 Presidential Election

    @asdf I just realized that "modern web development" with SPAs is a great example of the inner-platform effect. Basically, you implement you own custom browser in Javascript inside your generic browser.

    …I need a drink.



  • @RaceProUK

    I've seen a lot of code where the dev has decided to use just jQuery and some Ajax and it usually mess of callbacks or a team build their own framework which is woefully incomplete and has a nice few anti-patterns to suit. Yes I am sure that you and I do it sensibly but most developers don't.

    The whole point of frameworks such is that all your front end logic is structured in a particular way that has some solid documentation that you or another developer can refer to.

    Angular 2 is very much like building a ASP.NET (Webforms) app but in the browser.



  • @lucas1 said in Angular 2 first impression:

    @RaceProUK

    I've seen a lot of code where the dev has decided to use just jQuery and some Ajax and it usually mess of callbacks or a team build their own framework which is woefully incomplete and has a nice few anti-patterns to suit. Yes I am sure that you and I do it sensibly but most developers don't.

    The whole point of frameworks such is that all your front end logic is structured in a particular way that has some solid documentation that you or another developer can refer to.

    Angular 2 is very much like building a ASP.NET (Webforms) app but in the browser.

    You know a much less complicated way to build an ASP.NET Web Forms app? (waaaaaaaait for iiiiiiiit) .... build an ASP.NET Web Forms app.
    :micdrop:



  • @ufmace
    we aren't using react router, just react components for the frontend. because SEO. but with google bot being able to uderstand js sites et all that may change soon.



  • @Vaire

    Err no.

    I said it works like ASP.NET WebForms for the front end, also WebForms has a tonne of problems with Viewstate and other nastiness and you cannot write an SPA in it (unless you drop all the WebForms code and use generic handlers).

    I know it is cool on here to hate on any JS frameworks, but Angular 2 is pretty nice to work with and makes a lot of sense IMHO.



  • @lucas1 You didn't say build a SPA, you said build something LIKE ASP.NET Web Forms.
    There's an easier way to do that ;)



  • @asdf It's not SPAs, though. Gmail launched as an SPA and was pretty revolutionary compared to what came before.

    It's these people who believe any problem can be fixed by adding more layers of abstraction. And they're in every field, not just web development. (They're certainly in Java-- have you ever had JIRA crash and taken a look at its 70+ level deep call stack?)

    Yes, I'm sorry that DOM sucks. Tragic. But just suck-it-up and cope with it and write your damned code.



  • @Vaire The trolling aside.

    When I said something it is similar to ASP.NET Webforms, I mean the way the application is structured reminds you of a WebForms app. Angular 1.x is similar in this regard as well since it does things like databinding.

    Look I am not a fan of these monstrous frameworks and I really wasn't a fan of Angular 1.x, Ember etc. because quite frankly I think they are utter garbage for a number of reasons. Angular 2 seems well thought out, the typescript stuff and default project template just works out of the box.



  • @lucas1 said in Angular 2 first impression:

    also WebForms has a tonne of problems with Viewstate and other nastiness and you cannot write an SPA in it (unless you drop all the WebForms code and use generic handlers).

    Everything in that clause is untrue. ViewState (and PostBack) are merely configuration that can be turned-off. WebForms is entirely capable of serving up fully-materialized templates to AJAX requests.

    Except the last bit about using generic handlers which is kind of gibberish. "You can write a good WebForms SPA if you don't use WebForms at all"-- huh?


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.