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

Dogcow: Jun 21, 2005

Having done Angular and other JS MV* apps for the past year+ I'm now starting on a large Adobe AEM (used to be CQ) run static content site and it just seems totally loving backward to me. Even if your site is almost totally static and doesn't have much in the way of interactive crap the requirements of a large modern corporate site (this is a mid size insurance company's .com) are still very app-like and it just seems like a weird 1998 throwback to be putting together JSP templates and editing properties and all this nonsense. I get that not everything has to be an SPA and things are cached and all that but you can't tell me it's not a significantly better experience to only be loading what you need per "page" rather than a doing a whole new get and re-rendering everything just for a few dinky paragraphs, especially on a super lovely cell data connection where even the initial page call could just timeout. At least with an SPA if you change you're mind while it's taking forever to load you can click/tap some other link or whatever.

I don't get why this poo poo is so popular still. Also even though I've only just done some tutorials I already hate AEM/CQ pretty solidly. poo poo failing completely silently because you forgot a preceding slash in a node property somewhere? YAY.

# ¿ Mar 29, 2014 02:19

Adbot: ADBOT LOVES YOU

# ¿ May 19, 2024 12:36

Dogcow: Jun 21, 2005

Lumpy posted:

I am looking at Firebase right now, and that seems like it will work, but might be a little overkill actually. What are you guys using this week?

I've only messed around with it but Firebase is really great from what little I've done. It's actually used by large scale apps and Google just announced a whole mess of updates at I/O.

Sending it JSON couldn't possibly simpler, all it's really designed to do is store JSON and automatically provide a CRUD API from the structure. There is a whole security rules thingie but it seems your halfway there just by restricting all writes to a domain you have your back end app with business rules and what not on.

There isn't really a way for it to be overkill because it's just signing up for a free account and NPMing the JS lib in (which is actually literally the same package for Node and browser JS) or just using the plain REST service however you want. Subscribing to updates from any part of a JSON object is like 3 lines of JS.

There are also libraries for every other major platform. The pricing is based on volume but it's not anything you have to worry about for a hobby app.

# ¿ May 20, 2016 22:50

Dogcow: Jun 21, 2005

huhu posted:

I have a less question.
code:
ul{
	li{
		&:last-child{
			border-left: @gray-border;
		}
	}
}
Why is @gray-border being applied to every li in the ul?

Can you post the outputted CSS?

# ¿ Oct 6, 2016 00:28

Dogcow: Jun 21, 2005

huhu posted:

code:


.fixed-nav ul li:last-child {
    border-left: 1px solid #cccccc;
}

<ul>
  <a data-scroll="" href="#home-page"><li>Home</li></a>
  <a data-scroll="" href="#filter-page"><li>Portfolio</li></a>
  <a data-scroll="" href="#about-page"><li>About</li></a>
  <a data-scroll="" href="#skills-page"><li>Skills</li></a>
</ul>

You've got the list item tag and the anchor tag reversed, the li should be on the outside and the a on the inside.

# ¿ Oct 6, 2016 00:42

Dogcow: Jun 21, 2005

IAmKale posted:

On the subject of TypeScript, how are you supposed to handle creating types representing data retrieved from an API? When I was working with Angular2 I often used <any> to indicate JSON data returned by the server. It felt futile to create a representation of that data because it could potentially change in the future (add a new field, etc...).

This, there's also plenty of libraries to do it on the fly for Java etc if you google around.

# ¿ Nov 8, 2016 16:56

Dogcow: Jun 21, 2005

Skandranon posted:

Also, feel free to PM me any questions about Angular, half my day job these days is answering questions about it.

Any tips on state management stuff for Angular2 if you're not doing routing? What's the cool kid thing these days? Coworker pointed me to an article on using Redux though I'm unsure if that's overkill for our app which is relatively simple in terms of state.

Right now I have a service with an observable that broadcasts state changes as strings for the app component to plop into an ngSwitch and show the right thing. Probably as simple as it gets, unsure how much of a mess it might become trying to scale.

# ¿ Nov 16, 2016 01:44

Dogcow: Jun 21, 2005

Le0 posted:

I don't understand why the hell it's trying to parse the listName as an int?? And also why my listName attribute seems to be missing. When I print ${list}
I get: [ch.heigvd.poo.todolist.TodoItem@1e39ce1d, ch.heigvd.poo.todolist.TodoItem@72e3b472, ch.heigvd.poo.todolist.TodoItem@45fa30f9]
Which looks like a TodoItem list but my listName attribute should be in there also?? I'm kinda lost here.

Can you post the .jsp with the form that has the listName input? The listName is likely not making it into the DB and Java is trying to coerce null/undefined into a number for some reason.

# ¿ Jan 20, 2017 15:44

Dogcow: Jun 21, 2005

Le0 posted:

code:

<div class="container">
    <c:url var="createNewList" value="/todo/createnewlist"/>
    <form:form method="post" modelAttribute="newlistname" action="${createNewList}">
        <div class="form-group">
            <form:input path="newlistName" placeholder="New Todo List Name" />
            <form:button method="POST" type="submit" class="btn btn-primary">+</form:button>
        </div>
    </form:form>
</div>

...

<form:input path="taskName" placeholder="New Task Name" />

This is the only thing that popped out to me, should the path for the input be newlistName (instead of just 'listName')? Since the path for the task name is just taskName? This might not be the problem, I don't know Spring.

# ¿ Jan 20, 2017 18:52

Dogcow: Jun 21, 2005

a hot gujju bhabhi posted:

That's ridiculous. The hover effects are for desktop, Android handles them correctly without an issue.

I think the idea was "use media queries to only have hover effects on desktop"? Hover effects aren't a thing on touch based devices :confused:

# ¿ Apr 6, 2017 01:41

Dogcow: Jun 21, 2005

You can also do this:

JavaScript code:


{rows.map((row, index) => this.renderRow(row, index))}

If you omit the curly braces the return statement is implied.

# ¿ May 29, 2017 00:14

Dogcow: Jun 21, 2005

prom candy posted:

What is C# typically used for? Is it microsoft stack stuff? Web dev? I've never touched it but everyone speaks so highly of it.

From what little I've messed with it I really like C# but I really almost never see it in job descriptions even if you include .NET. Has MS just failed again? I don't understand why a good rear end thing like C# withers on the vine for modern web dev but apparently RoR is still everywhere at least by my googling.

Maybe it's just a kind of generational problem and all the cool teenagers making Unity games will make C# the poo poo in 5 years. One can hope anyway..

# ¿ Jun 16, 2017 04:10

Dogcow: Jun 21, 2005

a hot gujju bhabhi posted:

This is crazy talk. I'm a full time C# dev and there's incredible demand right now and it's very lucrative if you're good at it. C# is very very common in enterprise level stuff.

Yeah I realize now why I'm not seeing it in ads much: I'm looking at remote jobs and most/a lot of them are dumb startups. I didn't even think of it but that's obviously why.

# ¿ Jun 16, 2017 17:24

Dogcow: Jun 21, 2005

prom candy posted:

I use prototype and scriptaculous. I'm not just going to jump on every stupid flash in the pan hipster library that comes out.

I use XSLT to produce my ActionScript.

an actual thing that happened 8 years ago

# ¿ Jun 21, 2017 06:08

Dogcow: Jun 21, 2005

And here's the really right way to do it :smug:

code:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showMsg: false};
  }
  
  render = () =>
    <div>
      <button onClick={() => {this.setState({showMsg: true})}}>
        {this.props.children}
      </button>
      <h1>{this.state.showMsg && this.props.message}</h1>
    </div>;
}

https://jsfiddle.net/u2rer1Lq/2/

# ¿ Jun 23, 2017 23:52

Dogcow: Jun 21, 2005

Helicity posted:

My anecdotal observations: Notepad++ is great for editing giant files. Sublime used to be the king of web dev, but many have converted to VS Code. Microsoft does tooling and IDEs very well. Very few use Atom (slow) or Brackets. Anything from Jetbrains is decent to good (Webstorm, IntelliJ, pycharm, Resharper, etc.). I use IntelliJ for anything Java, and VS Code for everything else.

Went from WebStorm to VS Code and really love it. Not sure if I could pin it down to a single thing but generally JetBrains apps still feel like they're hanging on to some of the vestiges of it originally being a Java IDE.

Being free when my cheap rear end employer won't pay for an upgrade from IDEA 12 (3 or 4 major versions ago?), that helps.

# ¿ Jun 27, 2017 04:24

Dogcow: Jun 21, 2005

Tei posted:

Newbie question here.

Why are you guys talking about Webpack and not Gulp? are not both tryiing to solve the same problem? Has gulp fallen from the cool kids grace? Can I continue using gulp, or some demon is going to remove fhe carpet from below my feets?

Yes if you opt to choose one completely free piece of software over another entirely and completely free and open source piece of software you will be shot in the face by Satan and all his angels.

# ¿ Jul 1, 2017 06:26

Dogcow: Jun 21, 2005

prom candy posted:

Or roll your own front-end and use a CMSaaS like Contentful (not vouching for Contentful specifically, I haven't used it)

Squarespace has a similar thing though I also haven't used it. It does seem kind of cool though.

# ¿ Aug 3, 2017 22:50

Dogcow: Jun 21, 2005

Grump posted:

I don't think I've ever worked on a project that went above 7 components.

It's totally overkill on a project that small, that's why it seems over complicated. It's when you've got the massive data grid plus dozens of ways to filter it application/sometimes nightmare I'm currently on that it saves your sanity multiple times per day.

# ¿ Sep 28, 2017 18:29

Dogcow: Jun 21, 2005

Lumpy posted:

My Telerik anecdote is from a few jobs ago when our .NET guy went to a Telerik training thing and was all excited about using their stuff and was loving life for a couple weeks then wanted to do something slightly different / display data in a way not provided for by the default setup, spent the next few weeks cursing Telerik, then the next few weeks after that re-doing everything to not use their stuff any more.

This was my/team's experience pretty much verbatim minus any initial enthusiasm whatsoever.

# ¿ Oct 11, 2017 17:38

Dogcow: Jun 21, 2005

Grump posted:

I have a quick Redux question about running async actions in a row.

Here's an example action I have setup that makes an API call

JavaScript code:

export function getAllPosts() : any {
    return function (dispatch : any) {
        api
            .getAllPosts()
            .then((data : any) => dispatch({type: GET_POSTS, data}))
            .catch((e : any) => `error: ${e}`);
    };
}

then in my reducer, I just update the state:

JavaScript code:

export default function posts(prevState : Object = {}, action : PostBody) {
    const {postDetails, data} = action;

    switch (action.type) {
        case DELETE_POST:
            return {
                ...prevState,
                data
            };
        case GET_POSTS:
            return {
                ...prevState,
                data
            };
        default:
            return prevState;
    }
}

Now I want to test it in my index.js file, but I'm not sure exactly how to run these actions is a row, since they aren't returning a promise...

For some reason, deletePost() is running first

JavaScript code:

const loggerMiddleware = createLogger();

const store = createStore(reducer, applyMiddleware(thunkMiddleware, loggerMiddleware));

// how do I run these three dispatches in order???? None of these functions is returning a promise, so I can call a .then.
store.dispatch(getAllPosts());
store.dispatch(deletePost('8xf0y6ziyjabvozdd253nd'));
store.dispatch(getAllPosts());

ReactDOM.render(
  <Provider store={store}><App/></Provider>, document.getElementById('root')as HTMLElement);
registerServiceWorker();

There�s probably much better solutions with redux-saga or whatever but you could just call getAllPosts with your own promise that you resolve after dispatching the GET_POSTS action, then on resolve of that promise dispatch deletePost and so on.

# ¿ Oct 15, 2017 17:39

Dogcow: Jun 21, 2005

prom candy posted:

So if you use reselect for these kinds of helpers/derived data methods then you just link them up in your mapStateToProps function? I've been putting stuff like isEventToday() in standalone helper files, never really thought to use selectors for stuff like that.

Yup, so on state change the memorized selectors can evaluate their inputs from the state and decide whether to use the cached value or not. Centralized selectors are also good since if you access the same part of state in multiple places (or multiple composed selectors) and your state shape changes you have a single place to update that.

# ¿ Nov 4, 2017 19:13

Dogcow: Jun 21, 2005

Protocol7 posted:

This is an open ended question, but I am at the end of my own personal research and am instead turning to people who are most definitely smarter than me (which is probably all of you).

A small group of peers and I are trying to get a webapp project going. We have decided on a microservice architecture for the back-end and have been exploring similar things for the front-end using Angular. I'm fairly well versed in all the big frameworks like Angular, Vue and React, but I am just not sure how to approach developing a microservice oriented front-end.

I've stumbled upon things like Micro Frontends (https://micro-frontends.org/) and Project Mosaic (https://www.mosaic9.org/) but the problem I'm having is that it seems there is not a lot of practical, hands-on examples of how this works in code and in the case of Micro Frontends, it's missing important poo poo like page navigation. I have no problem understanding how to break a front-end into a microservice front-end from a concept standpoint, I am simply lacking in practical code examples that show how it works.

The big question is, are we wasting our time trying to figure out how to do this? Is this the right direction to go in, and is this feasible with Angular? I am fine building a standard "monolithic" Angular application and breaking things into components as you normally do if that is the best case. My initial thought was to build components that match up with the microservices anyway. We are simply trying to take as many steps as possible from the start to prevent our codebase from becoming an unmaintainable interconnected mess, so if a microservice front-end is not the way to accomplish it, other suggestions would be appreciated.

Guess I'm not sure what you mean by "microservices on the front end", at least in a single page app? Like you mean having multiple Angular apps on one page? I don't think Angular is really designed to allow that though I guess I don't really know for sure. You would end up with a lot of duplicated overhead and multiple digest cycles and whatnot though so I don't think it would be worth it. If code reuse is your concern then I think Angular modules (that encompass UI/services/controllers/etc.) is probably what you should look at instead.

I know that with the microservice set up some take the approach of foregoing the single page app and break their app up into multiple pages with their own apps using their own backend microservices. I don't think that's necessary myself unless your app is (or you believe it will eventually be I guess) really huge. If you want to separate out "component development" from "app development" you can use something like Lerna in conjunction with npm link to avoid the giant monolithic repo and Storybook to have a test bed/demo area for your components.

# ¿ Nov 18, 2017 01:17

Adbot: ADBOT LOVES YOU

# ¿ May 19, 2024 12:36

Dogcow: Jun 21, 2005

darthbob88 posted:

Related to prom candy's problem, I'm still working on a fancy todo list app to learn React. The problem is that the fancy part adds a lot of data which needs to be updated along with the list of tasks; I've got an ordered list of currently active tasks, all of which may need to get updated and resorted, a couple of derived properties from that list, and a quasi-separate list of all tasks including ones that have already been done. I'd rather do as much calculation as possible server-side, and treat that as the single source of truth, rather than risk the JS screwing up some calculations.
A) I assume I should keep the task lists combined, and filter out the currently active ones for special display, rather than keep two separate lists in the Redux store?
B) Given A, what would be the best way to update the active tasks? Request a full list of all the tasks to replace the current list in Redux, or request a list of only the updated active tasks, and replace those in the current list? The second one sounds better and more efficient, but I can't think of a really good way to do that. Maybe something like this, but it feels a little clumsy.
code:
var taskObject = {}; 
newTaskList.forEach(function(element){
	taskObject[element.id] = element;
});
store.tasks.forEach(function(task) { return taskObject[task.id] || task; })
C) Should I store those derived properties in a single store.derivedProperties field, or store.derivedA, store.derivedB, etc?

So I would just keep all tasks in one simple map (of id to task) and use the concept of selectors to determine what are the currently active tasks and their order. A selector is just a function that extracts whatever you want from your state, here is a simple example without using any extra libraries:

JavaScript code:

// selectors
const getActiveTasks = tasks => tasks.filter(task => task.isActive);
const getSortedTasks = tasks => tasks.sort((taskA, taskB) => taskA.sortOrder - taskB.sortOrder);

// compose them together into a single selector
export const getActiveSortedTasks = state => getSortedTasks(getActiveTasks(state.tasks));

// use these selectors to get the currently active tasks sorted in the correct order
const sortedTasks = getActiveSortedTasks(state);

The library reselect does much of this for you along with the big added benefit of 'memoizing' (basically just caching) each selector which means it won't recalculate the selection unless the arguments passed have changed since the last calculation. This is basically the best practice for Redux apps for this problem and it means you don't have to worry about storing the derived properties as reselect will effectively be doing that for you but in a much finer grained way as you can compose any number of selectors together and each one will be cached individually.

As for handling the updated tasks from the server holding all tasks in one map makes it simple to update them, with ES6 it's one line using spread syntax plus object destructuring assignment:

JavaScript code:

export const tasksReducer = (state = {}, { type, payload }) => {
  switch (type) {
    case TASKS_UPDATED:
      return { ...state, ...payload }; // action.payload is a map of the updated tasks by id
      break;
  }
}

Note about the example: obviously destructuring the action into type and payload in the reducer arguments relies on all of the actions for this reducer having the same shape however if you use the convention of the 'flux standard action' you can safely make that assumption everywhere in your app.

Dogcow fucked around with this message at 03:29 on Jan 7, 2018

# ¿ Jan 7, 2018 03:27

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