Fullstack Galore

Dev Zone Web Development
, ,
1

Purpose

What’s the purpose behind this topic? Simple, it’s to talk about all web based technologies, it doesn’t have to be back end, it doesn’t have to be front end, it can even be configuration or architecture. So… I’ll start…

My Wheel

I’d like to start by saying that I’ve not reinvented the wheel here, all I’ve done is live by my moto.

This is a pretty damn good wheel, but it could do with some oil, a nice paint job an’ some racing tyres.

So that’s essentially what I’m trying to achieve. I’ve had a look through various design patterns, features, concepts and implementations that spawn across the entire stack, on various tech stacks and I thought know what, screw it, I’m bored.

Says the guy who has a full time career, is studying part time and working as a freelance developer when possible, on top of doing a bunch of other stuff too.

My end goal is to define a design that can be transferred from project to project, I’ve begun developing a mock up of this design in PHP, I wouldn’t quite call it a framework yet as it’s so incomplete. Plus as it’s a design, it’s meant to be used to help define the architecture of the given project.

image

Do Tell

Okay, so I’m trying to define an implementation/system design that I can transfer from one project to another, without taking into account the technologies in use, so far my design consists of & takes into account the following:

  • MV-Hybrid (MVC/MVP)
  • CQRS
  • REST
  • Micro Services
  • Dual Routing
  • SPA
  • User Roles
  • Tokens
  • Load Balancing
  • Modularity
  • Evolution

Okay so the idea(s) behind my full stack design essentially merge a bunch of other ideas together, there’s not much to it more than that. I decided to go with an MVC/MVP like design because for the sake of the fact that it works, it’s easy to understand and considering it’s so popular, other developers can make sense of it without a large or even moderate learning curve.

I say it’s partially MVP because I personally believe that the data should go through the controller layer both ways. But that’s just a personal preference, if you want to go MVC and have your model send data back to the view, I guess that’s no problem either, and you’re still essentially following the outline(s) of the design.

The idea is to develop the back end as a RESTful API, allowing you to separate the front end as a completely different application. This way, you can have a variety of front end applications that can all interact with the same back end, using the same logic, to me this makes much more sense, and it means that evolution should be easier. I mean you don’t have to touch the back end if you want to make a hybrid web app, or a native app, it’s all there, all you need to do is possibly re-write how the data gets rendered (aka the front end), or in theory that’s about it.

Plus when you want to implement the next version of your API, it makes life a hell of a lot easier if you decide to migrate from one back end to another. I mean if you wanted to migrate to a totally different tech stack, it should be a lot easier compared to a lot of web apps that use server side rendering, it’s modular as hell! Obviously the same applies to the front end too, they don’t affect one another provided there are no major bugs on one end.

Here’s an image to help explain how this design works… So far.

image
image.png1017x758 29.6 KB

Implementation

Personally, I’d implement this design through using the LAMP stack to start with, then in future, if necessary, migrate to the MEAN stack, or the J2EE stack or whatever. Obviously it would be a matter of the right tool for the job, I only say I’d start with the LAMP stack because practically every hosting company has a deal that will support the LAMP stack without any config/fiddling around, and I know that there are some packages that won’t support x,y or z without an additional charge, etc.

Dual Routing

So you can see, I’ve got two routers, why?

SEO!

I mean why not? You can have a nice and pretty URL for your front end and then have some horrible/foul looking URL for your back end (if necessary), it’s really that simple.

Plus having dual routing means that you have the option of doing 90% of the work on the back end and then 10% on the front end, or vice versa, it’s no longer a matter of chose client side routing or server side.

I decided to have a security layer interact with the back end router because even if a client is trying to be a wizard and navigate to stuff they don’t have access to, worst case scenario, the back end router will just tell the client to get lost, and the client can’t retrieve data through that end point (401).

Other Topic

Another thing I’d like to talk about is what would you rather implement, and why?

  • Comet
  • Web Sockets
  • Web Sockets (Comet fallback)

0 voters

4 Likes
2

I understand maybe 10%-16% of what you are saying but FUCK YEAH! LETS GO!!!

2 Likes
3

That’s the god damn mother fucking attitude! :heart:

… But what part(s) did you not get? - Just so I know for future reference.

1 Like
4

Personally, I had never heard acronyms like CPQRS and SPA before, can you turn the things in your list into links so it be easier to follow your train of thought.

I think all those things you’ve mentioned have a place. However I believe many of those are overkill when you need to deliver an MVP. Consequently I think you should also work out / formalize some kind of design/development/delivery process(es), in a way that allows you to build your stack incrementally.

Back to technical aspects, I’d consider using docker/kubernetes for some of the underlying hosting aspects. That way you probably don’t have to be tied to the lamp stack and PHP - it’s amazing how much serving you can do in 50MB of ram these days :slight_smile:

Also, continuous integration and testing (both manual and automated) should be something you should plan for.

1 Like
5

SPA I find quite surprising to be honest, with all these SPA oriented tools and what not, it seems like quite the trend these days.

  • CPQRS, my bad, it’s meant to be CQRS. I’ve made the edit now. In a very basic sense, just think of it as breaking a model into two separate models, one for read, the other for write. :slight_smile:

  • SPA single page application, it’s the style which a lot of modern websites/web apps are being made today, a fine example is Facebook (at least the majority of it), it’s where the client doesn’t have to refresh the page, basically.

I’ll try to do this later on today, I’m currently in work at the moment.

That’s essentially what I’m trying to achieve, I’m currently just coming up with a blue print, and when I feel the blueprint is complete then I’m going to try out the initial design with some demo/test project which I don’t really care much for or one that can just be thrown away willy nilly.

I’ve just included an image to show the basic structure of how I was thinking this design would work. I’ve actually already started playing around with an implementation, so far it’s very good, the routing specifically, you can try to break that all you like, it just isn’t breaking. :joy:

I was simply using this as an example, I know a lot more people/places are actually capable of doing a lot of setup & configuration themselves, you hold a strong point, but at least in the UK, a lot of companies mid-small companies are consistently in a rush to do things (badly). I’m sure that in my previous role, if I mentioned something like that I’d get a slap in the face and then get told that I’m to work with what I have (Super out dated versions of PHP and MySQL).

Now a big part of this may be due to the fact that I’ve been very unlucky with previous roles, my first role, Jesus, PTSD, all files in a single dir on the same FTP… Every website using a single DB… Even nearly every website would store it’s product data into a single table on this one DB… That table is at least a good few million records long, when IMO it just shouldn’t be.

The database side of things should be setup so that each store has it’s own DB at least? Surely that’s the logical thing to do when you’re a global, multi million $$ company? etc. I remember looking through that data and just thinking wtaf?

Already ahead of yah!

I’ve got some ideas floating around, like using selenium in Java/Jython, that way you can take advantage of multi threading, if it’s necessary, with my previous experiences, I’m gonna say that there are times where you’ll need that multi threading. I.E. one company I worked for, the back end was out sourced, a single DHTML page would take at least 45 seconds to render… Idk what the hell was going on in the back end, but it sure as hell was not functional in any sense of the word :stuck_out_tongue:

Manually, as majority of the back end is an API, just use some tool(s) like ARC. Then front end, easy, just try your best to break stuff… :joy:

But this isn’t so much a development life cycle, or anything along those lines, it’s more of a structure on how a web based application would work. Whilst I appreciate your point, I think that for the structure of how an application will work, it’s some what irrelevant.

In all fairness to this point, I should’ve been more clear in the way I worded things, I was in a bit of a hurry, I’ll try to re-word it a little later.

1 Like
6

I agree it should not be your primary concern at this stage, but the framework design often times ends up influencing adoption through “developer experience” or “ergonomics” – this is why so many companies are coming up with “developer advocate” positions - where a dev gets put into a marketing role. Speaking plainly, whatever you come up with needs to be not just technically correct, but also easy.

7

I think, it’s like that everywhere almost. I somehow got thrown into this PHP world too, because they bought a source code of some program from china. Was also some great stuff when the same currency is guaranteed to have a different number of decimal points in every column it’s represented and sometimes be a varchar just because they can. Every Table uses like a different Database engine and has sometimes rogue encoding settings. Your keys are generally Strings like customer name. Not even a foreign key, just soft key. Change the customer name and everything falls apart. And things like the cron job that hands out money being in a sub directory of the public folder that’s named something like ‘XYZsdgjeaohefasegefdf’ to make it “inaccessible”. lul

Pretty much all of these things are now resolved, but I still wasn’t very happy with it. Learned Laravel (in well my actual free time) migrated half of the program (in well again my actual free time). Then showed them. They where like ‘no’ too complex. Go away with it. Well, I’ll just stick to doing my own projects in my free time if i want to do something. At least then I end up with something that I don’t have to throw away, unless I choose to do so for my own reasons.

1 Like
8

Of course, that’s rule 1, keep it simple, even if you’re making something that does complex things, it doesn’t essentially mean that the code itself has to be complex.

I thought that was the case to be honest, as for being in the PHP world, I only do that as a freelance career now, I’ve actually never had a position where PHP has been my main language to go to. But it’s fine, it’s not exactly a complex language to pickup, as long as you learn about all it’s weaknesses, an example being shell injection, you should be fine.

LMFAO… I don’t think that makes anything inaccessible, but the way you’re describing that role, it sounds very much like my first job. I mean some of the source code would send important & private data back to the user within the URL, and a tonne of other stupid things like that. You just think wtf are you guys doing? … Like I remember there was a security issue because one of the ‘senior’ developers actually send credit/debit card data back to the UI within the URL… What the actual fuuuuuccckkk :stuck_out_tongue:

OMG… This is my first role?! … :joy: … I remember the front end being just 100% bespoke HTML & CSS per page, like 0 reusable code, when I tried to show them angular, they were like… FGS mate, don’t do that, none of us know Angular… It’s like man… Really? … :stuck_out_tongue: … I even remember one of the ‘senior’ developers thinking that ReactJS was done on the backend, hand on heart, I was just thinking man… Where the hell did you pull that from? Keep in mind this was prior to people doing the rendering on servers became quite popular.

Conclusion

There’s too many ‘senior full stack developers’ that actually haven’t got a clue what they’re doing. I only listen to more ‘senior’ developers now if they can prove to me that they’re worthy of the senior title! :stuck_out_tongue: lol…

9

The diagram and info about REST indicates potential conflict. Maybe it is just naming of boxes (and its interpretation). But in general I see too many parallel lines between FrontEnd application and EndPoint (REST Endpoint?) .

1 Like
10

I’d imagine it is down to the naming of the boxes to be perfectly honest, the actual idea is 100% REST, 0 server side session(s), you name it. My approach involves as minimal load on the web server as possible really, there’s just a few key mechanics that ensure that security is never broken. In my architecture, the web server 100% just serves the purpose of:

  1. Validation
  2. Authentication
  3. Authorisation

Not a great deal else. For the back end, the router is only really there for an added layer of protection, just so no one can get to the raw back end source code file(s). Or at least they can only preview certain one(s), so worst case scenario, they’d be able to access the REST end point(s).

I mean if anything, the idea was to allow the front end to do all of the pretty URL/SEO magic, thanks to the likes of history push state and/or location hash(old browsers)! :slight_smile: … All the ugly REST url’s are just called through AJAX, and if I’m not mistaken, there are a few clever tricks that you can do to make a bot see the rendered JS product, although I can’t 100% remember how you achieve this, I believe it’s on dom load. Don’t quote me there though… I am seriously testing my memory here, either way, it’s something I need to do a bit of research into, SEO for SPA! :stuck_out_tongue:

If anything, I’ve started developing some of the front end components that will be required, such as a router, I’ve only made my own cause there are many out there that I feel are a bit bloated, such as History.js, I mean to be fair, I think that even works in IE6 or something. Personally for me, I’ll support as far back as IE8, any further back and in my personal opinion, that guy can f**k right off. :joy: … I mean it’s not that it would be impossible, I just personally don’t care for supporting technology that old. I mean IE8 alone is coming up to being 10 years old, even Microsoft no longer support IE8, so for me to go outta my way to support it, it just seems unnecessary vast majority of the time, there are cases of course where it may be a minimal requirement of the job.

I’ve also made a template engine that surprisingly works in IE8 with no noticeable bugs… :stuck_out_tongue: … I’m actually very happy with how well this works, both speed and how nice it is to use, just needs a general tidy up and it should be ready to go!

1 Like
11

Your idea of developing something like this sounds interesting. And I agree that while choosing a web development stack you need to consider which tool would be right for the particular job. I found a very helpful article that explains how to choose a web stack for a project, might be useful: https://www.cleveroad.com/blog/web-development-stacks

12

Hey, sorry for the delayed reply, I’ve been busy as hell with life as of recently, but absolutely, even if you decide that you like the Java ecosystem for whatever, reason, because it can work for a small-mid size company, in which case, it’s a reasonably safe bet to state that it’s probably wise to invest into Spring Boot. It’s simple, well documented & thanks to some of the enterprise stuff, it can allow you to do a lot of things with just meta data/configuration, etc… It could be the right tool, maybe not, it’s a case by case scenario! :slight_smile:

I mean take my current role, I’m currently working in a highly enterprise organisation, we’ve been using traditional Java EE web technologies, up until now. As we’re migrating from having our own in house servers, we’re going down the path of using Docker & Kubernetes with one of the large cloud based providers. The initial problem being that we needed to find a way to off load state from the server into some data store, whether that’s something like Redis or just some RDBMS cluster(s)… Anyhow, considering our current tech & the amount of work it would be to do this, as we couldn’t find a simple & elegant way, i.e. we’ve decided the best bet is to refactor our code to utilise Spring for the back end, to implement some REST API(s), then Angular on the front end… So far it’s been relatively easy, a lot of the simple state stuff is just being persisted into the web browsers session storage object, but I fear that there may be other implications down the line.

Now like this scenario, we were using a 2-tier application architecture, but due to circumstances, we’re being forced to adapt to a 3-tier application architecture instead. :slight_smile: