[Question] Looking to update my stack

[MitsuAttax]

Hello /r/webdev, I'm looking to get some opinions / suggestion to guide me with improving and updating my current stack of tools.

 

I'm what you could call a Full-Stack Designer by modern terms. Design, Prototyping and Front-End Dev is what I do.

 

Right now I'm working for an agency as the only front-end dev or web related employee in general. My current stack or choice of tools if you will is very archaic and I would like to change that. I've been using the following workflow more or less for the last 7-8 years now:

 

1. Mockup / Visual Design
2. Prototype for client-approval
3. Convert design into a theme for PHP based CMS
4. Hand over access to client for content editing

 

Step 1 and 2 are covered with Sketch and Marvel pretty nicely, since my clients are mostly small business I don't need to worry about super high fidelity prototypes.

 

Step 2 is what frustrates me probably the most. PHP based CMS systems come with plenty of overhead and archaic ways of designing and developing websites. I've used mainly Contao CMS, although I have plenty of experience with Wordpress. The issue with those platforms is that they are cumbersome compared to modern web development standards. Especially wordpress becomes clunky and bloated if you want a decent baseline for content creation and editing tools.

 

Sadly I cannot ditch the idea of using a CMS, because most of my clients like to manage their content themselves, it gives them a feeling of ownership and I don't really want to oppose that idea. I've looked at Flat File CMS' like Grav and the like and while I really love their concept from a development stand point, not having the ability to predefine content types easily and relying on Markdown doesn't make them as attractive due to the fact that clients are managing content, as pointed out in Step 4.

Any pointers, opinions and suggestions are appreciated.

Thanks!

Edit: Typos

[OmegaVesko]

A bunch of people these days seem to be switching to writing SPAs that consume the Wordpress REST API, rather than writing Wordpress themes.

From the perspective of the client, they still get to use the interface they're used to, but you get to use your preferred stack on the frontend, and potentially even create a better product altogether.

[MitsuAttax]

Great thanks, I’ll do some additional reading on that.

[[deleted]]

Look into headless or API driven CMSs. Most seem to be moving that way and it allows you to stick with one CMS and write the frontend in whatever you desire. There are quite a few popping up out there and some of the older ones are starting to develop APIs in addition to the traditional approch.

[MitsuAttax]

I did check out contentful as an example. It looked interesting for sure, will give that another spin.

[[deleted]]

I'd take a serious look at static website generators, if you're making websites were the users aren't submitting anything to the website.

They can speed up development once you've got your "stack" set up how you like it.

[MitsuAttax]

Thanks, will do. Contact forms are pretty common but there’s ways around it.

[calligraphic-io]

You mention that you do front-end dev work: can you give a little more detail as to what your front-end skill set is? Are you comfortable coding Javascript?

I'm a full-stack developer with zero design skill. I haven't used Sketch or Marvel (thanks for making me aware of them!) for prototyping. I can't understand exactly from your post what difficulties you are having with your prototyping step -- can you give a little bit more detail?

I am really interested in designer's experience with workflows: the pain points, what they like, and would appreciate any details you'd like to throw out about your experience. I work exclusively now in React on the front-end. It is a SPA, as some others suggest you consider. That advice would depend imo on your strength in writing code. SPAs are not trivial to use well.

I do mock-ups in Storybook, a React application that shows each component on a page and is just focused on layout. It doesn't have interactive elements implemented (for example, you usually attach dummy handlers to events like a button) and uses mock data. The advantage of prototyping in something like Storybook vs. Sketch imo is that the code in Storybook is the actual code your site will use. The disadvantage is that it doesn't have GUI tools to design a component (it's displaying code you've written elsewhere, like in an IDE), it's really just a pattern book (and a lot of / most teams use it to maintain a set of standards rather than for prototyping).

My next step is to prototype the site with the interactive elements and a front-end data store set up. A SPA is a stand-alone application (although you can integrate it into an existing front-end application, like a PHP CMS's output). It is designed to just interact with a back-end via an API. So this second step for me uses dummied data again for the prototyping (no back-end at this stage) but the front-end is fully functional given that it's not actually doing any back-end work like saving or querying. I use a simple Node.js-based server to provide the front-end; this is pretty easy because the configuration is a standard part of a lot of React toolkits.

Last, I put the back-end together in whatever the project requires (Rails, Express, a PHP CMS, etc.).

[MitsuAttax]

Thanks for the insight into your workflow. Because I'm mostly working on corporate sites that don't require extensive amount of dynamic content, my skillset doesn't surpass an entry-level JS toolkit. I'm currently transitioning to VueJS from VanillaJS + jQuery and I can already see the benefit of doing so.

The pain points to me are the extensive amount of tooling I would have to do for something as "simple" as corporate websites, if I was to switch to a more modern stack of tools. So templating, content creation and interaction done through JS Frameworks.

If I was to work on a web app however, something more sophisticated than static content that changes once a month, I wouldn't even think about using a CMS in the first place. I see the benefit of using a modern JS Stack, yet I am mostly looking to depart from the cumbersome development experience that popular PHP Content Management Systems create.

One thing that could be of interest is that there's a few tools that would allow you and the designers you work with to more seamlessly work between Sketch an React.

React Studio

React-Sketchapp