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

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

sim posted:

Anyone have experience with Ext.js or Sencha Touch? I've avoided it like the plague but I keep getting recruited for jobs that require it.

I am passingly familiar with ext.js through the .net implementation of it. Initially I thought it was awesome as it took care of so many little things for me and worked well, but after it spread through my team's application, it became cumbersome and some of the warts make me want to just remove it and redo everything another way.

# ¿ Dec 11, 2013 14:24

Adbot: ADBOT LOVES YOU

# ¿ May 15, 2024 19:44

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

kloa posted:

jquery needs to put out a lite version for just the selectors, cause gently caress typing all that

I have this saved but haven't tried it:
https://github.com/bendc/sprint

# ¿ Aug 31, 2015 22:41

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

If react is just the view, what is generally used for the model and controller? We are stuck in front end framework hell.

# ¿ Nov 25, 2015 01:14

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

Thermopyle posted:

It's complicated.

As it says (used to?) on the React site, many people use React as the "V" in MVC. But there's more and more people bending the whole thing away from a traditional MVC type of thing by using Flux and Flux-inspired sorts of things like redux.

Anyway, people use React with Angular (mostly as a replacement for directives), Ember, Backbone....umm, basically anything you can think of that does the "M" and the "C" in javascript.

edit: Found the graphics I was faintly recalling that describe Flux vs MVC: http://fluxxor.com/what-is-flux.html (fluxxor is a fairly popular implmentation of the Flux system articulated by Facebook)

_{(but really everyone should just use redux instead of that old and busted Flux from a few months ago)}

Lumpy posted:

Short answer: whatever you want!

Real answer: most react apps use the "flux" architecture (there are many implementations, or make your own!) in which the application state lives in stores (or single store in small apps or implementations like Redux). What is rendered is derived from the store only: components "just read" from it and render based on what's there.

To modify the state in the stores, one dispatches "actions" from either a single Dispatcher or something like it (again, there are many implementations) and those actions cause the store(s) that are interested in that action to update. Once a store updates, it notifies any components that are subscribed to it that it changed, and they can rerender if needed.

So in the horribly trite ToDo app example, there will be a list of "todos" in a store. When a user types in some text and clicks 'add', an "add_todo" action is dispatched. The store gets the action, adds the value in the actions payload to the list of todos it is keeping track of, and notifies it's listener, the ToDoList component, which rerender a because the data it is interested in has changed.

There are many, many implementations so what I just typed up is a very rough overview: each implementation is a bit different in how it handles things, so good news is you can find one that fits your style. Bad news is, there's a lot of them, so you have to look around and so forth. Many of us like Redux, which always keeps state in a single Store which also acts as the dispatcher. Any change to state has to flow through a "pure" function reducer, so you don't mutate your state.

Thanks, these are helpful. It sounds like I'm between Angular 2 with TypeScript, and React with a Flux implementation. No one uses Flux with traditional MVC though?
Does anyone know if there is scheduler written for both Angular and/or React that is as robust as extjs's calendar? 50% of our app that we are converting is built around the calendar: http://examples.ext.net/#/Calendar/Overview/Basic/

# ¿ Nov 25, 2015 20:17

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

Does anyone have an example of cascading drop downs in react? I can't seem to find one.

# ¿ Dec 22, 2015 11:55

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

Lumpy posted:

https://react.rocks/tag/Dropdown There's a few on that page. (although maybe they all suck or were written for 0.13...)

I've seen that page and maybe my eyes are broken but I'm specifically looking for something like:
Two dropdowns, One for State, one for City, initial state is for States are list of states, initial state for Cities is empty. When a state is selected, the cities for that state are pushed into the city dropdown.
I'm assuming (I literally just started working with react today), that the store would have the city/state data, and I could simply use that to specifically bind properties to the two dropdowns?

# ¿ Dec 22, 2015 23:59

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

Depressing Box posted:

That sounds about right. Here's a way you could structure it:

The State dropdown receives states, selectedState, and an onChange handler that updates selectedState.

The City dropdown receives cities (filtered by selectedState), selectedCity, and an onChange handler that updates selectedCity.

EDIT: Here's a basic example on JSFiddle.

This is perfect, thank you so much. I was able to understand this, and even modified it to have the datasource be a single array. If I wanted to have one of the Component's props load from a URL, is there an easy way to do that?

For example, I have the below code now and want cities to be bound to an api endpoint:

code:

const cities = [
	['Red City 1', 'Red State'],
	['Red City 2', 'Red State'],
	['Red City 3', 'Red State'],
	['Blue City 1', 'Blue State'],
	['Blue City 2', 'Blue State'],
	['Blue City 3', 'Blue State']
];

const states = cities.map(city => city[1])
             .filter((value, index, self) => self.indexOf(value) === index);

ReactDOM.render(
	<StateCitySelect states={states} cities={cities}/>,
	document.getElementById('root')
);

# ¿ Dec 23, 2015 15:01

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

Anyone using the Polymer Project? I am getting lost in all of the javascript options and since I don't care about browser compatibility (can tell users, just use Chrome's latest version). Or would skipping Polymer and going straight to web components be an option?

# ¿ Oct 2, 2016 19:55

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

Thermopyle posted:

I think the real question is, why do you think you need Polymer or web components?

Ah yes, the good old "your question is not your actual question" haha. In thinking about it, I guess my real question is: is there a front end framework/library/etc that is best suited when you have 100% control over what browser a user has and don't need to care about compatibility? Being that my apps are solely for use on an internal network, I can enforce usage of Chrome and have full control over technology choices as well.

Polymer popped up in a discussion when we were looking at the technology used in one of our company's external customer facing apps so I guess that prompted the question since I've been working my way through react and am toying around with redux and mobx.

Uziel fucked around with this message at 14:34 on Oct 3, 2016

# ¿ Oct 3, 2016 12:04

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

Lumpy posted:

Are you talking "makes things look good" type of library, a "makes things easy to code", or a "does both at the same time"? My guess is the first, but I'm not sure.

Ugh, like all of them. We are using ext.net at the moment and making heavy usage of the calendar control. Aside from the CRUD BS for config and reporting, its two SPAs that feed into each other. One is a scheduling application for managing ~5000 technicians, the other is middleware between those tech schedules and a billing system so its lots of dynamically generated controls and values based on config and billing system info. It's currently done in ASP.NET Webform so its performance is awful and I want to redo it.

# ¿ Oct 3, 2016 13:00

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

I'm stumped by CORS.

I'm consuming a vendor's API. I can get it to work just fine in Postman, Fiddler, etc.

When posting to the API to get my token, I get CORS errors. I have no control over the API/server end.
What should I do differently?!

code:

function getToken() {
            $.ajax({
                url: "tokenURLwithclientid/etc",
                type: 'POST',
                headers: {
                   "Access-Control-Allow-Origin": "*", 
                   // "Access-Control-Allow-Headers" : "Origin, X-Requested-With, Content-Type, Accept, Authorization,Access-Control-Allow-Origin",
                    //"Access-Control-Allow-Methods" : "GET,OPTIONS,POST"
                },
                error: function (err) {
                    console.log('Error!', err)
                },
                success: function (data) {
                    console.log('Success!');
                    console.log(data);
                    //localStorage.setItem('token', data.id_token);
                }
            });
        }

# ¿ Sep 15, 2017 20:13

Adbot: ADBOT LOVES YOU

# ¿ May 15, 2024 19:44

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

Lumpy posted:

Are you sure their API allows cross-origin access? The Access-Control-Allow-Origin bit is a server thing, not something you should be doing.

You may want to add:
JavaScript code:
xhrFields: {
    withCredentials: false
}
to your jQuery thing, as that can help, but if the API is using cookies for session auth, it will break it.

Thanks, I'm going to ask them if they allow that.

Skandranon posted:

If the backend does not support CORS, there isn't much you can do in the client to get around that. CORS is something where the browser politely knocks, asks if it may send a request, and if the server says no, the browser won't try. Postman doesn't bother knocking and just barges in, and the client then responds with what is asked for.

If you need to get around this, you could use something like nginx or some other forwarding tool, where you implement an API on your end that DOES support CORS, and then it simply makes the request for you. But, this involves setting up a backend service for your client, which maybe you can't actually do.

That's likely what I'll end up doing (and I already have server side code that communicates with their API).

# ¿ Sep 16, 2017 18:40

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