Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »

Dominoes: Sep 20, 2007

Component chat: Docs for the framework on working on re components - does this make sense as an approach? Is this approach done in any other framework? What advantages am I missing by eschewing OOP components, and rules that require one-element-per-component? I suspect the main reason React, for example, doesn't do this, is to maintain syntax-equivalence in JSX between built-in dom elements, and custom components.

quote:

Components
The analog of components in frameworks like React are normal Rust functions that that return Els.
The parameters these functions take are not treated in a way equivalent
to attributes on native DOM elements; they just provide a way to
organize your code. In practice, they feel similar to components in React, but are just
functions used to create elements that end up in the `children` property of
parent elements.

For example, you could break up the above example like this:
Rust code:
    fn text_display(text: &str) -> El<Msg> {
        h3![ text ]
    }  
    

    div![ style!{"display" => "flex"; flex-direction: "column"}, vec![
        text_display("Some things"),
        button![ events!{"click" => Msg::SayHi}, "Click me!" ]
    ] ]
The text_display() component returns a single El that is inserted into its parents'
`children` Vec; you can use this in patterns as you would in React. You can also use
functions that return Vecs or Tuples of Els, which you can incorporate into other components
using normal rust code. See Fragments
section below. Rust's type system
ensures that only `El`s can end up as children, so if your app compiles,
you haven't violated any rules.

Note that unlike in JSX, there's a clear syntax delineation here between natural HTML
elements (element macros), and custom components (function calls).

Fragments
Fragments (`<>...</>` syntax in React and Yew) are components that represent multiple
elements without a parent. This is useful to avoid
unecessary divs, which may be undesirable on their own, and breaks things like tables and CSS-grid.
In Rebar, there's no special syntax; just have your component return a `Vec` of `El`s instead of
one, and pass them into the parent's `children` parameter via Rust's Vec methods
like `extend`, or pass the whole Vec if there are no other children:
Rust code:
fn cols() -> Vec<El<Msg>> {
    vec![
        td![ "1" ],
        td![ "2" ],
        td![ "3" ]
    ]
}

fn items() -> El<Msg> {
    table![ vec![
        tr![ cols() ]
    ]
}

My intent is to give users flexibility in how they set up the layout; it's all Rust code, and therefore limited only by Rust's rules... The component pattern is a natural way to break up view code; I expect it to be used in an equivalent way to components in other frameworks, but with nothing special going on under-the-hood. Now that I think about it, React's functional components are similar, with the one-item-return-rule, presumably to facilitate JSX use.

Dominoes fucked around with this message at 03:20 on Dec 3, 2018

# ? Dec 3, 2018 02:17

Adbot: ADBOT LOVES YOU

# ? Jun 6, 2024 09:47

Obfuscation: Jan 1, 2008; Good luck to you, I know you believe in hell

I need to code Angular but I'm not very good at it, can anyone help with this.

The situation is that I have this component that manages a fairly complicated view. It already does a lot of view-related things, and I can't really break it up into any smaller pieces.

Problem is, that in order to use this view, I need to make 3 or 4 separate api calls and bang that data together to get anything useful. Right now, all this logic is in one service that both makes the actual api calls and then processes the data. This file is getting bigger than I would like, and it feels really tightly coupled with the view component.

I'm not sure how to refactor anything though. Ultimately I would probably like to have a thin service without any logic that contains all the api calls, but I'm not sure where to put the rest of my code. Should I make a second service that calls the first one? Or should I make a separate component that processes the data and has the view component as a child? In React, the stateful vs pure component separation feels easier to reason with but like I said, I'm bad at Angular.

# ? Dec 3, 2018 16:22

HaB: Jan 5, 2001; What are the odds?

Obfuscation posted:

I need to code Angular but I'm not very good at it, can anyone help with this.

The situation is that I have this component that manages a fairly complicated view. It already does a lot of view-related things, and I can't really break it up into any smaller pieces.

Problem is, that in order to use this view, I need to make 3 or 4 separate api calls and bang that data together to get anything useful. Right now, all this logic is in one service that both makes the actual api calls and then processes the data. This file is getting bigger than I would like, and it feels really tightly coupled with the view component.

I'm not sure how to refactor anything though. Ultimately I would probably like to have a thin service without any logic that contains all the api calls, but I'm not sure where to put the rest of my code. Should I make a second service that calls the first one? Or should I make a separate component that processes the data and has the view component as a child? In React, the stateful vs pure component separation feels easier to reason with but like I said, I'm bad at Angular.

I haven't seen your code, but I already disagree with the bolded part.

Also: AngularJS or Angular?

Based on what you describe, I'd wager it can be broken up on the basis of what each of your API calls provides, unless they are dependent on each other - eg. Call 1 gets a vale that Call 2 needs and Call 2 gets a value that Call 3 needs, etc.

But hard to tell without seeing code or a more detailed description.

# ? Dec 3, 2018 17:06

Obfuscation: Jan 1, 2008; Good luck to you, I know you believe in hell

HaB posted:

I haven't seen your code, but I already disagree with the bolded part.

Also: AngularJS or Angular?

Based on what you describe, I'd wager it can be broken up on the basis of what each of your API calls provides, unless they are dependent on each other - eg. Call 1 gets a vale that Call 2 needs and Call 2 gets a value that Call 3 needs, etc.

But hard to tell without seeing code or a more detailed description.

It's Angular, should be the latest version. I spent few hours refactoring my code by moving all the logic into a separate component and pushing data to the other component with @input hooks. It feels simple enough but I guess I need to show it to somebody and see if they can understand it.

# ? Dec 3, 2018 20:53

Dominoes: Sep 20, 2007

Hey dudes; cross-post from the Rust thread. Getting ready to release that web framework I've posted about. Repo with instructions in the Readme. Looking specifically for critique about the API, syntax, and guide. My plan is to finish up the todo MVC example within the next few days, then publish it.

Does it make sense from the POV of someone who doesn't know Rust? Does it seem like something you'd be able to pick up on from just that readme? I'm suspicious the borrow-checker will be a nuisance.

# ? Dec 10, 2018 06:07

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Dominoes posted:

Hey dudes; cross-post from the Rust thread. Getting ready to release that web framework I've posted about. Repo with instructions in the Readme. Looking specifically for critique about the API, syntax, and guide. My plan is to finish up the todo MVC example within the next few days, then publish it.

Does it make sense from the POV of someone who doesn't know Rust? Does it seem like something you'd be able to pick up on from just that readme? I'm suspicious the borrow-checker will be a nuisance.

What the gently caress is a borrow checker and why is it yelling at me?

But seriously, I'll take a gander at work tomorrow. I know nothing about Rust, so I'll be a good guinea pig.

# ? Dec 10, 2018 06:43

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

I got myself all psyched out over the coding part of the TripleByte front-end interview but it was actually pretty reasonable and pleasant, except for that performance anxiety where someone is watching you code and judging you :gonk:

I will say that I think they try to cram an awful lot into the Q&A/system design part, but that could be me getting ramble-y.

Had the interview earlier today and wanted to get this out there before I got whatever feedback I'm gonna get :ohdear:

# ? Dec 12, 2018 21:02

22 Eargesplitten: Oct 10, 2010

Has anyone used react-loadable? It looks like exactly the module that would be useful for what I want to do (dynamically load/expand sections of my page when someone clicks on a button) but I want to make sure I�m not opening myself up to a bunch of poo poo.

# ? Dec 13, 2018 22:16

Vincent Valentine: Feb 28, 2006; Murdertime

I don't want to don't like I'm judging or anything, but why not just use onClick to change state and then show/hide components based on state? Is your use case particularly complicated?

# ? Dec 14, 2018 00:19

Doom Mathematic: Sep 2, 2008

Hmmm

# ? Dec 14, 2018 00:41

22 Eargesplitten: Oct 10, 2010

Vincent Valentine posted:

I don't want to don't like I'm judging or anything, but why not just use onClick to change state and then show/hide components based on state? Is your use case particularly complicated?

That's what I was trying and it wasn't working right, but I probably screwed something up. Definitely screwed something up.

E: When you say show/hide, you mean include or not include them in the render function, right?

# ? Dec 14, 2018 01:17

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

22 Eargesplitten posted:

That's what I was trying and it wasn't working right, but I probably screwed something up. Definitely screwed something up.

E: When you say show/hide, you mean include or not include them in the render function, right?

Yeah probably via ternary operator or &&.

# ? Dec 14, 2018 03:21

Vincent Valentine: Feb 28, 2006; Murdertime

Using && is typically my approach, yes, but there's a lot of ways to do it.

Why don't you post a code block with any errors? I can see if there's any obvious issues.

# ? Dec 14, 2018 06:38

SimonChris: Apr 24, 2008; The Baron's daughter is missing, and you are the man to find her. No problem. With your inexhaustible arsenal of hard-boiled similes, there is nothing you can't handle.; Grimey Drawer

If you don't like ternaries, you can also put the conditional layout in a simple functional component that returns null if the condition is false.

Or, if you prefer to keep things inline, you can use my favorite hack, the self-executing inline function:

code:

<div>
{(() => {
  //Do some calculations here, or whatever
  if(!condition) {
    return null;
  }
  return <SomeComponent />
})()}
</div>

SimonChris fucked around with this message at 12:24 on Dec 14, 2018

# ? Dec 14, 2018 12:14

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Dominoes posted:

Hey dudes; cross-post from the Rust thread. Getting ready to release that web framework I've posted about. Repo with instructions in the Readme. Looking specifically for critique about the API, syntax, and guide. My plan is to finish up the todo MVC example within the next few days, then publish it.

Does it make sense from the POV of someone who doesn't know Rust? Does it seem like something you'd be able to pick up on from just that readme? I'm suspicious the borrow-checker will be a nuisance.

Okay, sorry for being slow, but here is my feedback:

Big picture, I get it, but I think only because I learned Elm. Coming from a React background solely would leave me stumped I think. Not so much because the architecture is confusing, but because I'm being hit by Rust syntax coupled with a different (or at least seemingly different) way of doing things. If getting React people to use this is a goal, a little more hand-holding would be nice. But in general, I was able to "get it" and I could very likely code up a simple app just based off the Readme. Well done.

Some specific nit-picks, through the eyes of someone who knows nothing about Rust:

It's not 100% clear that I need to make my own index.html if I cargo new --lib appname I think I do, and if so, I wonder why... would be nice if that got made for me!

I don't know what a Cargo.toml is, or why exactly you are showing me an example of one. Do I need to make that myself? Do I modify one that got made for me?

Down in the Initializing your app section does this: ...and name of the element (Usually a Div or Section) actually mean the tag name, or does it mean an element ID?

There were a couple grammatical errors I noticed but forgot to copy / paste and now I can't find them again. Not huge things, but I noticed them.

-----

Impressive work!!

# ? Dec 14, 2018 16:13

Dominoes: Sep 20, 2007

Appreciate it! Clarified and corrected all of the above (except grammar errors) in the readme; not live yet.

In short:
-cargo new creates a new rust library; eg it makes a folder with a handful of starter files: Cargo.toml, a git repo with a few default ignores, and a bare-bones code file. Ie, it's a pure Rust command that has nothing to do with this framework. If we wanted to have it auto-gen the html file, I could make a command-line utility that would auto set up these things. For now, the quickstart repo handles that, for the sake of transparency. Might switch later.

-Cargo.toml is like package.json

- 'name' should be 'id'

Current status is it's published, but there's a nasty bug in the vdom patching I need to sort out.

Surprisingly, the only framework I've used before is React - I've never built an Elm app! The Elm-like approach is due to a cursory glance at how clean its structure is: You can do something similar in React using functional comps and Redux. (Or go in a completely different direction with class-based components and getters/setters) The view syntax coming out more like Elm is an unintended side effect of eschewing JSX/templates, using brackets, and convergent design. I'm trying to take what I like from both frameworks, and avoid what I don't like:

React I like:
-Mixing view code with language code
-Clean inline style
-Function-based components
-vdom concept
-Overall flexibility and simplicity

React I don't like (context: with TS):
-Boilerplate, either for connecting redux, or setting up a top-level component (or if you go class-components throughout)
-Excessive chains of props being passed up and down the structure, including callback, if not using Redux
-Repeating every prop name in the func sig when using Typescript
-npm / transpiling / finding help is a mess due to fragmented nature of JS, although has gotten better with Webpack 4.
-{{ }} required to transition between view and language code, and two types of comments

Elm I like (from a glance):
-Clean structure

Elm I don't like:
-Forced into FP style: Works well for view/update logic, but may not for business logic
-Being its own language makes it niche

If you compare my framework's todoMVC code with this one using React, you'll see a very different structure... but that's due to subjective choices about how to use React; you could use it with Redux and The Elm Architecture to create one more similar to my example.

Dominoes fucked around with this message at 18:22 on Dec 14, 2018

# ? Dec 14, 2018 17:50

22 Eargesplitten: Oct 10, 2010

Vincent Valentine posted:

Using && is typically my approach, yes, but there's a lot of ways to do it.

Why don't you post a code block with any errors? I can see if there's any obvious issues.

Thanks, but I figured it out. In the conditional statement for the toggling function I was using this.butt rather than this.state.butt.

Does React have some responsive magic working in the background? This thing is looking way better on a mobile device than my old site did and I'm not sure if it's the library helping or just me sucking less.

# ? Dec 16, 2018 05:05

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

22 Eargesplitten posted:

Thanks, but I figured it out. In the conditional statement for the toggling function I was using this.butt rather than this.state.butt.

Does React have some responsive magic working in the background? This thing is looking way better on a mobile device than my old site did and I'm not sure if it's the library helping or just me sucking less.

React has absolutely zero styling of any kind built in, so congrats on sucking less.

# ? Dec 16, 2018 06:32

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.

Doom Mathematic posted:

Hmmm

How big are your components that this is a noticeable thing? Lazy loading based on module routes in Angular works just dandy IMHO, and I guess you can make it as granuar as you like.

# ? Dec 16, 2018 07:52

Doom Mathematic: Sep 2, 2008

Ape Fist posted:

How big are your components that this is a noticeable thing? Lazy loading based on module routes in Angular works just dandy IMHO, and I guess you can make it as granuar as you like.

I was more referring to the fact that React Loadable seems juvenile as hell.

# ? Dec 16, 2018 16:20

22 Eargesplitten: Oct 10, 2010

Lumpy posted:

React has absolutely zero styling of any kind built in, so congrats on sucking less.

Woohoo. I think part of it is I'm not trying to assign so much manually and just letting flexbox and grid do their thing more. I used to have text overflowing all over the place when on a mobile device, but now I also have a breakpoint at max-width 640px flipping the column-oriented flexbox and the grid to row-oriented flexboxes. I've also heard the good word of vmin-sized text so it shifts fluidly and looks way better.

My wife wants animation for the expanding sections, would this be a good way to do that? She did it in CSS, but A) it's a bit hacky, and B) since I'm doing a full render on click rather than changing an existing element on hover (mobile-first baby) it wouldn't work quite the same.

https://reactjs.org/docs/animation.html

I'm probably still going to do a hover option for it (although I don't like having a whole section expand like that tbh), but that's part of progressive enhancement, not the base case when the majority of traffic will probably come from a mobile device.

# ? Dec 16, 2018 18:09

SimonChris: Apr 24, 2008; The Baron's daughter is missing, and you are the man to find her. No problem. With your inexhaustible arsenal of hard-boiled similes, there is nothing you can't handle.; Grimey Drawer

https://popmotion.io/pose/

I am using react-pose for animation, which I think have a more intuitive interface than the transition group stuff. YMMV, of course.

# ? Dec 16, 2018 19:27

Dominoes: Sep 20, 2007

Hey dudes. How do you host low-traffic open-source SPAs for free? Eg: Github Pages, but with custom routing (or all routing to the main page), or Surge, but with https on custom Domains... Going to try Firebase next. Could probably do this with Heroku, but seems like overkill.

Dominoes fucked around with this message at 01:11 on Dec 19, 2018

# ? Dec 19, 2018 01:00

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

React�s CRA lets you configure the base path for things like Github Pages.

# ? Dec 19, 2018 01:38

ModeSix: Mar 14, 2009

Dominoes posted:

Hey dudes. How do you host low-traffic open-source SPAs for free? Eg: Github Pages, but with custom routing (or all routing to the main page), or Surge, but with https on custom Domains... Going to try Firebase next. Could probably do this with Heroku, but seems like overkill.

Firebase will do exactly what you're looking for.

# ? Dec 19, 2018 02:45

Dominoes: Sep 20, 2007

Awesome, thanks! edit: Firebase seems to want things set up in a particular way with a lot of config/special proj structure/html file. It's not clear from the official docs how you'd use this for an arbitrary proj. Much steeper learning curve than GH-pages and Surge.

Dominoes fucked around with this message at 03:40 on Dec 19, 2018

# ? Dec 19, 2018 02:52

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Dominoes posted:

Hey dudes. How do you host low-traffic open-source SPAs for free? Eg: Github Pages, but with custom routing (or all routing to the main page), or Surge, but with https on custom Domains... Going to try Firebase next. Could probably do this with Heroku, but seems like overkill.

Check out Netlify, they let you get a way with a lot on their free plans, including custom domains and HTTPS, some rudimentary CD...it�s perfect for use cases like yours.

# ? Dec 19, 2018 05:26

Dominoes: Sep 20, 2007

Perfect - solved, via Netlify.

# ? Dec 19, 2018 05:58

Sulla Faex: May 14, 2010; No man ever did me so much good, or enemy so much harm, but I repaid him with ENDLESS SHITPOSTING

Does anybody have a good 'best practices' guide for npm security? i want to check out angular but i also remember the flatmap (flatstream?) fiasco a few months ago and i must suck at googling because i cant find a good, plain retrospective on how to offset npm's inherent security risks

# ? Dec 21, 2018 14:05

Cugel the Clever: Apr 5, 2009; I LOVE AMERICA AND CAPITALISM DESPITE BEING POOR AS FUCK. I WILL NEVER RETIRE BUT HERE'S ANOTHER 200$ FOR UKRAINE, SLAVA

Sulla-Marius 88 posted:

Does anybody have a good 'best practices' guide for npm security? i want to check out angular but i also remember the flatmap (flatstream?) fiasco a few months ago and i must suck at googling because i cant find a good, plain retrospective on how to offset npm's inherent security risks

Jake Archibald's most recent blog post addresses the topic, but it's focus is on catching issues and mitigating threats. Bottom line is that there's still way more risk than there are ways to adequately address it. https://jakearchibald.com/2018/when-packages-go-bad/

# ? Dec 21, 2018 14:43

smackfu: Jun 7, 2004

Use a package lock file so that your dependencies only update when you want them to.

# ? Dec 21, 2018 22:28

Aaronicon: Oct 2, 2010; A BLOO BLOO ANYONE I DISAGREE WITH IS A "BAD PERSON" WHO DESERVES TO DIE PLEEEASE DONT FALL ALL OVER YOURSELF WHITEWASHING THEM A BLOO BLOO

We also run an offline NPM mirror at work and make RetireJS/Snyk part of the build pipelines, but that's just slowing things down than preventing anything. The whole NPM ecosystem is reactive garbage that only gets better reluctantly or accidentally.

# ? Dec 21, 2018 23:06

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

It's been ages since I did any frontend stuff, but I'm getting ready to start something new.

What's the big changes in React/Redux in the last 18 months? (Or maybe I should tell React/Redux to gently caress off and use something else?)

# ? Dec 29, 2018 22:27

The Fool: Oct 16, 2003

Hooks (https://reactjs.org/docs/hooks-intro.html?no-cache=1) look really cool, but they aren't in the stable versions yet.

# ? Dec 30, 2018 00:04

dick traceroute: Feb 24, 2010; Open the pod bay doors, Hal.; Grimey Drawer

Context API is official now, but I haven't tried it yet

# ? Dec 30, 2018 00:33

Dominoes: Sep 20, 2007

The Fool posted:

Hooks (https://reactjs.org/docs/hooks-intro.html?no-cache=1) look really cool, but they aren't in the stable versions yet.

Looks neat! My biggest problem with React is managing state: Eg either unwieldy chains of props and callbacks + OOP boilerplate (at least in the top-level component), or glue code + a mock-enum (string) reducer in Redux that's tough to troubleshoot for typos. Looks like both those changes address this.

# ? Dec 30, 2018 01:12

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Anyone work with Firebase? I'm wanted to work on a new pet project and wanted to use firebase.

The premise of the app is this: I want to give the app a list of liquors and it will give back a list of cocktail suggestions

Will I have to write server code if I want to paginate and filter/search or is that easy to do with Firebase? Will I have to write any server code for something like this?

# ? Jan 4, 2019 04:26

Gildiss: Aug 24, 2010; Grimey Drawer

Grump posted:

Anyone work with Firebase? I'm wanted to work on a new pet project and wanted to use firebase.

The premise of the app is this: I want to give the app a list of liquors and it will give back a list of cocktail suggestions

Will I have to write server code if I want to paginate and filter/search or is that easy to do with Firebase? Will I have to write any server code for something like this?

I work with Firebase.

Depending on how much traffic you are expecting a server could be useful, but not necesary.

Do be aware though, for querying data, you can index based on any fields you have, but can only query from Firebase on one field per query, then filter further from that response data locally.

# ? Jan 4, 2019 05:42

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Also now realizing with firebase, there's no such thing as JOINing data

If a document has a reference to data in another document, you have to do multiple round trips to the server.

so...

JavaScript code:

    componentDidMount() {
    getCocktails().then(response => {
      return response.map(eachCocktail => {
        eachCocktail.ingredients.map((eachIngredient: any) => {
          return getIngredient(eachIngredient.name)
            .then((response: any) => console.log(response))
        })
      })
    })
  }

https://stackoverflow.com/questions/47100446/firestore-document-references-can-you-expand-the-document-server-side/47107572#47107572

p loving annoying

# ? Jan 5, 2019 04:14

Adbot: ADBOT LOVES YOU

# ? Jun 6, 2024 09:47

Dominoes: Sep 20, 2007

Grump posted:

Anyone work with Firebase? I'm wanted to work on a new pet project and wanted to use firebase.

I tried it recently to host a project when having trouble with Github pages routing... it's a PITA to set up; requires loads of config. Moved to Netflify, which was commit and done.

# ? Jan 5, 2019 07:49

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »