Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Context strikes me as something that, while useful, is going to require a lot of care to avoid becoming global variables by another name.

Adbot
ADBOT LOVES YOU

Capri Sun Tzu
Oct 24, 2017

by Reene

Munkeymon posted:

Many people probably thought the same thing about SQL Server's XML column spec and now look where we are :ohdear:
Yeah but XML though

Doh004
Apr 22, 2007

Mmmmm Donuts...

Capri Sun Tzu posted:

Yeah but XML though

The lesson's still the same. There are pros and cons to tightly coupling your datastore to your client-side representation.

Bruegels Fuckbooks
Sep 14, 2004

Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

Thermopyle posted:

Context strikes me as something that, while useful, is going to require a lot of care to avoid becoming global variables by another name.

Every class I've encountered in the working world that had 'context' in the name ended up being a singleton housing hundreds of global variables.

my bony fealty
Oct 1, 2008

Anyone have any suggestions for resources to learn GraphQL? Howtographql is detailed but has a "here's a bunch of boilerplate code you've never seen before, no we're not going to explain any of it" problem.

I will accept "suck it up and figure out howtographql" as an answer, if that's really the best option.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Bruegels Fuckbooks posted:

Every class I've encountered in the working world that had 'context' in the name ended up being a singleton housing hundreds of global variables.

Yeah that's why I've always been a little confused about the excitement over context.

You've always been able to design lovely systems with all your state in global variables, that's a large part of reason we ended up embracing Flux and the like...

darthbob88
Oct 13, 2011

YOSPOS
Webpack question: I'm trying to migrate an AngularJS app to Angular 2+, trying to go through the whole "Bootstrap AngularJS inside Angular 2 and then upgrade each component" thing. I'm stuck on upgrading it to use Webpack for module-loading, where the actual task keeps failing with `Module build failed: SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16) [...whole lotta files in node_modules]`. The Webpack.config.js file is
code:
module.exports = {
    entry: "./Scripts/app/app.ng2.ts",
    output: {
        filename: "./Scripts/app/compiled_app.js"
    },
    devtool: "source-map",
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: ['node_modules'],
                loader: 'ts-loader'
            },
            {
                test: /\.less$/,
                loader: "less-loader"
            }
        ]
    }
};
and app.ng2.ts is
code:
//import { NgModule, Component } from '@angular/core';
//import { BrowserModule } from '@angular/platform-browser';
//import { UpgradeModule } from '@angular/upgrade/static';

//@Component({
//    selector: 'root-cmp',
//    template: `<div class="ng-view"></div>`,
//})
export class RootCmp { }

//@NgModule({
//    imports: [
//        BrowserModule,
//        UpgradeModule,
//    ],
//    bootstrap: [RootCmp],
//    declarations: [RootCmp]
//})
export class Ng2AppModule {
    constructor() { }
}
I can't find anything wrong that might kick that error, and Webpack isn't being specific; all the files listed in the error are either in node_modules or node.js. I am extremely open to doing this with something other than Webpack.

E: Problem "fixed", I think, had been an issue with ts-loader v4 that went away when I downgraded to v2. Now I just have to deal with Typescript not properly loading and importing from AngularJS.

darthbob88 fucked around with this message at 20:07 on Apr 24, 2018

poemdexter
Feb 18, 2005

Hooray Indie Games!

College Slice

Capri Sun Tzu posted:

NoSQL is great when you have deeply nested data or object structures. SQL is better suited to tabular data or transactions. NoSQL beats the hell out of SQL when you have to run analysis on say half a billion records. NoSQL also requires you to spend a lot more time thinking about how to structure your data for efficient querying.

Yes if you can shove half a billion records in memory, it will certainly have better performance over traditional databases.

Capri Sun Tzu posted:

My favorite thing about JSON stores is fetching a record for your web app and BAM you just stick that sucker right into your model, no mapping needed because its all javascript

I think most API's these days return JSON responses regardless of how they store the data behind the scenes.

prom candy
Dec 16, 2005

Only I may dance

my bony fealty posted:

Anyone have any suggestions for resources to learn GraphQL? Howtographql is detailed but has a "here's a bunch of boilerplate code you've never seen before, no we're not going to explain any of it" problem.

I will accept "suck it up and figure out howtographql" as an answer, if that's really the best option.

The fun fun function vids on it were pretty good.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

poemdexter posted:

I think most API's these days return JSON responses regardless of how they store the data behind the scenes.

Hell, most relational databases can read, store, query, and return json at this point.

prom candy
Dec 16, 2005

Only I may dance
What's the best way to manage interfaces when I'm working with TypeScript and GraphQL on the client-side? In an app that relies on a RESTful api I might have a bunch of types like Post, Author, Comment, etc. but in a GraphQL situation I never know what's going to be there. Should I define the top-level types and then just partials everywhere, or should I define custom interfaces for basically every component and forget about the idea of top level "model" types?

darthbob88
Oct 13, 2011

YOSPOS
Angular question: My app is refusing to bootstrap because it can't resolve the parameters for my component. So far as I can tell, everything should be resolvable; the services it relies on are all properly typed and decorated with @Injectable(). What else should I look for to troubleshoot this? None of my googling has found a solid answer.

lunar detritus
May 6, 2009


darthbob88 posted:

Angular question: My app is refusing to bootstrap because it can't resolve the parameters for my component. So far as I can tell, everything should be resolvable; the services it relies on are all properly typed and decorated with @Injectable(). What else should I look for to troubleshoot this? None of my googling has found a solid answer.

Did you declare everything in your app's AppModule?

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

darthbob88 posted:

Angular question: My app is refusing to bootstrap because it can't resolve the parameters for my component. So far as I can tell, everything should be resolvable; the services it relies on are all properly typed and decorated with @Injectable(). What else should I look for to troubleshoot this? None of my googling has found a solid answer.

What specifically is the error?
Do you have a component with an @Input that you're not giving a value in the parent?

darthbob88
Oct 13, 2011

YOSPOS

gmq posted:

Did you declare everything in your app's AppModule?
As far as I can tell, yes. Everything I created has been declared or imported, and all the Angular components I'm relying on.
code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { scenarioService } from "./services/scenario-service";
import { notificationService } from "./services/notification-service";
import { telemetryService } from "./services/telemetry-service";
import { scenarioComponent } from './controllers/scenario-controller';
import { AppRoutingModule } from './routing';
import { LandingComponent } from './controllers/landing-controller';
import { FourOhFourComponent } from './controllers/404-controller';
import { AppComponent } from './controllers/main-controller';
import { FeedbackComponent } from './controllers/feedback-controller';
import { StaticComponent } from './controllers/static-controller';
// export const pbApp = angular.module("pbApp", ["pbControllers", "pbServices", "pbFilters", "ngRoute", "ngSanitize", "ngCookies", "ui.bootstrap"]);


@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule,
        HttpClientModule,
    ],
    declarations: [
        AppComponent,
        scenarioComponent,
        LandingComponent,
        FourOhFourComponent,
        FeedbackComponent,
        StaticComponent
    ],
    providers: [scenarioService, telemetryService, notificationService],
    bootstrap: [LandingComponent]
})

export class AppModule { }   
and
code:
export class LandingComponent {
    siteConfig: any;
    constructor(
        private scenarioService: scenarioService,
        private telemetryService: telemetryService
        //private location: Location
    ) { }
// Some other irrelevant nonsense
}

The Merkinman posted:

What specifically is the error?
Do you have a component with an @Input that you're not giving a value in the parent?
The error is below, no @Inputs involved. I've pruned the component down so it only relies on two providers, which I'm importing directly from their files so they should be easily resolved.
code:
compiler.js:15989 Uncaught Error: Can't resolve all parameters for LandingComponent: (?, ?).
    at syntaxError (compiler.js:486)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15706)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:15541)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:15026)
    at CompileMetadataResolver._getEntryComponentMetadata (compiler.js:15854)
    at compiler.js:15835
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getEntryComponentsFromProvider (compiler.js:15834)
    at compiler.js:15789
    at Array.forEach (<anonymous>)

darthbob88 fucked around with this message at 16:29 on Apr 26, 2018

HaB
Jan 5, 2001

What are the odds?

darthbob88 posted:

As far as I can tell, yes. Everything I created has been declared or imported, and all the Angular components I'm relying on.
code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { scenarioService } from "./services/scenario-service";
import { notificationService } from "./services/notification-service";
import { telemetryService } from "./services/telemetry-service";
import { scenarioComponent } from './controllers/scenario-controller';
import { AppRoutingModule } from './routing';
import { LandingComponent } from './controllers/landing-controller';
import { FourOhFourComponent } from './controllers/404-controller';
import { AppComponent } from './controllers/main-controller';
import { FeedbackComponent } from './controllers/feedback-controller';
import { StaticComponent } from './controllers/static-controller';
// export const pbApp = angular.module("pbApp", ["pbControllers", "pbServices", "pbFilters", "ngRoute", "ngSanitize", "ngCookies", "ui.bootstrap"]);


@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule,
        HttpClientModule,
    ],
    declarations: [
        AppComponent,
        scenarioComponent,
        LandingComponent,
        FourOhFourComponent,
        FeedbackComponent,
        StaticComponent
    ],
    providers: [scenarioService, telemetryService, notificationService],
    bootstrap: [LandingComponent]
})

export class AppModule { }   
and
code:
export class LandingComponent {
    siteConfig: any;
    constructor(
        private scenarioService: scenarioService,
        private telemetryService: telemetryService
        //private location: Location
    ) { }
// Some other irrelevant nonsense
}

I don't see your imports in the LandingComponent. You are importing there, I assume?

Are the services both @Injectable decorated?

darthbob88
Oct 13, 2011

YOSPOS

HaB posted:

I don't see your imports in the LandingComponent. You are importing there, I assume?

Are the services both @Injectable decorated?
I am indeed and they are.

HaB
Jan 5, 2001

What are the odds?

darthbob88 posted:

I am indeed and they are.

poo poo. poo poo's loving BROKE then.

darthbob88
Oct 13, 2011

YOSPOS

HaB posted:

poo poo. poo poo's loving BROKE then.
That's very helpful, thank you. So what can I do about this? Nuke node_modules and start over from there? Try recreating those services? Sacrifice a chicken at my desk?

E: I moved the services out of the main AppModule and into the individual @Component({ }) decorators, following this article, so now those components are working fine, but now I'm getting the same issue with the service failing to resolve the Http/HttpClient I'm passing in to the constructor. I'm beginning to think I pissed off a gypsy or something.

E2: I've added @Inject() to the parameters in every constructor, and now they're working fine. Current problem is with the templates; the AngularJS project I'm upgrading from was content to slap them on the layout template wrapped in <script type="text/ng-template" id="404template.html">, and now Angular is pitching a fit because it can't properly locate 404template.html. The other problem is that I'm also trying to use ASP.NET's resources to localize this, which means that I need it to process the files before Angular uses them as a template. Fun.

E3: Solved the template problem by just dumping those templates directly into the component file, all 1-200 lines of them. Second order of business, after getting something I can actually demonstrate, is going to be pulling half of that out into smaller components. Current problem is StaticInjectorError(Platform: core)[telemetryService -> e]: \n NullInjectorError: No provider for e!, which supposedly can be fixed by just importing HttpClientModule and HttpModule in app.module.ts. I'd be a lot more pleased with that solution if I wasn't already doing it, though.

darthbob88 fucked around with this message at 00:22 on Apr 27, 2018

prom candy
Dec 16, 2005

Only I may dance
GraphQL and apollo are very cool. I need to get further along but so far it feels like I've reduced a lot of the boilerplate involved in fetching/serializing data that I would normally do with Redux.

Ape Fist
Feb 23, 2007

Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.
declare the access permissions of your methods and properties you gently caress

darthbob88
Oct 13, 2011

YOSPOS
Angular UI question: Is there a good way to toggle components between small/large screens? If clients are viewing my site on a large screen, I want to show them a carousel of options, if they're viewing it on a small screen, I want a dropdown or two, that sort of thing. Right now I'm looking at this StackOverflow response but I'm wondering if there's a better way.

HaB
Jan 5, 2001

What are the odds?

darthbob88 posted:

Angular UI question: Is there a good way to toggle components between small/large screens? If clients are viewing my site on a large screen, I want to show them a carousel of options, if they're viewing it on a small screen, I want a dropdown or two, that sort of thing. Right now I'm looking at this StackOverflow response but I'm wondering if there's a better way.

I would likely do it in a similar manner to that Stack Overflow answer, but without the magic numbers.

Or dropping each one in a div and using a media query to toggle display would work, with basically no javascript required:

https://stackoverflow.com/questions/11796297/div-show-hide-media-query

darthbob88
Oct 13, 2011

YOSPOS

HaB posted:

I would likely do it in a similar manner to that Stack Overflow answer, but without the magic numbers.

Or dropping each one in a div and using a media query to toggle display would work, with basically no javascript required:

https://stackoverflow.com/questions/11796297/div-show-hide-media-query
That was the other option I was considering, especially since I already have the smallMobile/largeMobile/desktop media queries set up. I'll stick with the StackOverflow for right now, since this is the only case where I need to show different HTML for different screen sizes.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!
Has anyone successfully tried the new Custom Elements in Angular 6? Anything I find either has bad documentation or doesn't work

smackfu
Jun 7, 2004

Can anyone explain what they use the async pipe for in Angular?

HaB
Jan 5, 2001

What are the odds?

smackfu posted:

Can anyone explain what they use the async pipe for in Angular?

Think of it as binding a subscription directly in a template. Kinda like . (pseudocode here):

code:

// in component.  This Observable emits a new value every Second:

ticker = Observable.create(() => {
    // function that gives new value every second
});

// template:

<div>The ticker value is: {{ ticker | async }}</div>

The pipe means you don't need to setup up a .subscribe somewhere in your component. The template value will just update whenever the Observable calls .next()

Ape Fist
Feb 23, 2007

Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.
Guys have any of you looked into developing at least a simple back-end system to layer your front-end application on top of?

Something with a relatively simple idiot-friendly structure that could be deployed for small scale applications?

I want to make a small application but it's doing to obviously need a DB and APIs to read/write too etc but I don't wanna be like urrrghhhh and start learning a whole new technology stack while I'm still really only just learning front-end myself.

my bony fealty
Oct 1, 2008

The WordPress REST API could be a good option for you. Works wonders with custom post types and Advanced Custom Fields.

It's real easy to spin up a WP installation on DigitalOcean and use that as your backend.

Gildiss
Aug 24, 2010

Grimey Drawer
Firebase?

prom candy
Dec 16, 2005

Only I may dance
Contentful, prisma, graph.cool

There's lots of options if you just need CRUD

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

my bony fealty posted:

The WordPress REST API could be a good option for you. Works wonders with custom post types and Advanced Custom Fields.

It's real easy to spin up a WP installation on DigitalOcean and use that as your backend.

Good lord no.

my bony fealty
Oct 1, 2008

Lumpy posted:

Good lord no.

Why

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell


Its like putting this whole questionable layer between you and a simple CRUD database for no gain. As has been mentioned, there's a good selection of purpose-built services for this.

porksmash
Sep 30, 2008

Thermopyle posted:

As has been mentioned, there's a good selection of purpose-built services for this.

My main issue with these ORM as a service providers is that their pricing models are very large-product centric. If I want to spin off a dozen small scale business store websites without mixing into the same 'application' it's big bucks. Or I have to create dozens of free accounts with different email addresses, which is a pain and probably against TOS.

prom candy
Dec 16, 2005

Only I may dance
I don't think it's typically against TOS to create separate accounts for separate applications. I think if you were weaving together multiple accounts to get around usage limits for a single app that would violate TOS. Obviously depends on the service though.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Because forcing a blog engine to be your application backend is a bad idea. Plus there's all the WP security concerns, etc.

my bony fealty
Oct 1, 2008

Thermopyle posted:

Its like putting this whole questionable layer between you and a simple CRUD database for no gain. As has been mentioned, there's a good selection of purpose-built services for this.

That is fair, it is overkill for just CRUD for sure. The fact that it's open-source and easy to self-host is very attractive to me given that a lot of other options as mentioned are not great at the free tier. Isn't Prisma a rebranded graph.cool too? It looks like that is open source now which is great, but it's also rather complex and you gotta learn a whole new thing to even use it.

Lumpy posted:

Because forcing a blog engine to be your application backend is a bad idea. Plus there's all the WP security concerns, etc.

WP hasn't really been a blog engine for years; yeah it started as such but has been a fully featured CMS and web platform for a long time now. The REST API has first-class support, there's nothing being forced. Security concerns aren't any worse than anything else if you know what you're doing (i.e. don't install a bunch of unmaintained plugins). There are lots of problems with WP, yes, but it's totally fine to use as a headless CMS for data storage.

Tbh if you truly just want CRUD and having something that does "too much" is an issue then just learn to roll it yourself. If/when you start wanting more advanced things e.g. authentication then it's time to look at a third-party solution, either to integrate into your own setup or to pick one that does it all for you.

Vincent Valentine
Feb 28, 2006

Murdertime

Seconding just learn to do it yourself.

I promise it is not anywhere near as difficult as you think, even things like authentication.

If you just want a quick prototyping solution, you can set up a mongodb with mlab, then connect that DB to a node express layer. The whole process will take you about eight hours for the first time you ever see those concepts, then maybe an hour every subsequent time. Personally, I built a small crud server that is front end agnostic that I use and reuse for quick type stuff with create react app, then when it's time to get serious I can just switch to the servers Branch to the stripped down version, copy it over and start building for real.

Things like graph.cool seem neat, but like everyone else said it seems really expensive for one guy loving around.

Adbot
ADBOT LOVES YOU

prom candy
Dec 16, 2005

Only I may dance
Learn to do it yourself and then use well tested open source solutions or shell out for SaaS options.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply