This repository was archived by the owner on Dec 11, 2023. It is now read-only.
Open
Conversation
Introduce an additional abstraction (service.js) that takes care of communication between the JS client and the Java server. The main reason to introduce it is to allow mocking the service - this way we can run a frontend app locally, even if the Java backend is down. The *real* reason is that I haven't managed to start the Google App Engine, because I forgot my security key, so I'm hacking things to unblock myself.
vue-router is responsible for Client Side Rendering in Vue apps. This bit is critical to having multiple urls handled by the same Single Page App - instead of trying to fetch a new html file for each url, the app will ask the router which component it should render.
- redirect to SearchResults after submitting the form - fetch data on query update - render returned results
Icons are usually taken from some public repository, integrated with the framework. [Fontawesome](https://fontawesome.com/icons) is probably the most popular one.
Adding some CSS, Vue-style. I tried to replicate the original CSS, at least to some extent. I've simplified things a little bit (i.e. I've used 1 background pic instead of 2). Pardon my CSS - I'm definitely not an expert. To be honest, I have no idea what I'm doing. But it looks ok, imo.
Home uses a slighlty different layout - the search bar is located below below the text, because it's the main element on the page. In all other views the search bar functions as a navigation element, so we put it on the very top.
The component is registered in main.js - as a result, it's not accessible when we render App directly. Use the `stubs` property to mock it.
Contributor
|
Nice to hear from u! P.S. Happy New Year to you too!) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
It took me quite a while, but I've finally managed to find some time and provide a sample of a frontend app written 100% in Vue.js.
Long story short, I've been trying to rewrite what you guys have implemented in vanilla HTML + CSS + js and pack it into a single page app (except for a few places where I was a bit too lazy to do things exactly as I should). Some things are mocked out, so don't expect the whole app to work - it's just a client making fake requests to a fake service.
Lessons learned:
It's probably not going to too useful, but in case you've come to hate frontend development because of all that manual HTML and CSS management, well, here's how it's done (in a simplified form) these days. Some things are much easier this way, there's still plenty of things to drive people crazy, but, all in all, it's a bit more manageable and, most importantly, you can write unit tests.
Either way - don't worry too much about this PR - it can hang here forever. I just had some spare time during Christmas so I've decided to finally send a PR I've been talking about.
P.S. Happy new Year!