The Motivation
I am an experienced Java developer and (surprise!) I like Java. I know it is not perfect but it works just fine for me (I enjoy type-safety and I do not consider verbosity a disadvantage, quite the opposite). I also know that some people dislike Java, which is also fine.
But recently I decided to step out of my confort zone as developer, my goal isn't to be one of the "cool kids" neither trying to monetize a new skill in the job market.
I have a quite practical motivation: I want to be able to build more (different) stuff.
That's exactly the same reason why I learnt Android development by myself a couple of years ago.
Web applications are ubiquitous, even more than native mobile apps, and thanks to cloud computing, one can easily and inexpensively release their idea/app to the World Wide Web.
I already did some Web development in the past, in the bad old days of JSP and JSF, but the process was slow and painful.
Nowadays the Web landscape has totally changed though, JavaScript is a mature language, it provides classes (well, not really, but bear with me) and a whole ecosystem which includes dependency injection, dependency resolution, a backend server (Node.js) and advanced IDEs.
The JavaScript Framework
So the first step was to decide what to use for frontend development, among the numerous options, there are two main ones (by popularity): React or Angular.
After some research it seemed that Angular was more suitable for devs coming from the Java world, mainly because of two reasons:
- Typescript is more strongly typed than "naked" JavaScript, which makes it more similar to Java.
- Angular is a framework (not a library like React) which means that it provides more guidance (it's opinionated) and includes a comprehensive set of helper tools (e.g., a CLI).
So I chose Angular and VSCode as my Integrated Development Environment.
The Proof Of Concept
After having decided with what I'd code, one more important question remained open: what to code.
All I knew is that I wanted to make a modern (albeit simple) single page Web site. And by modern I essentially meant asynchronous live data loading onto the UI without user interaction (i.e., server data push, no need to click the "refresh" button).
But what would be the source of the data? That's when I decided to make things more interesting by throwing Android into the mix.
I decided the application would push location updates from my phone to the backend running on AWS and then to the Web browser.
All the data transfers would be in JSON format and secured by HTTPS (self-signed certificate).
And since I was already in 'adventurous mode', I decided to use Vert.x (a Java framework to build reactive applications) in the backend because it had been on my radar for a while already and it also provides good integration with JavaScript through its SockJS event bus bridge.
You can see how the web application works in the following video:
The Code
After several weeks of after-work coding and dealing with three different Git repositories, three different IDEs (AndroidStudio, Eclipse and VSCode) and two programming languages (Java and Typescript), I am ready to share the code with anyone who would care to have a look at it:
mylocation-frontend
mylocation-backend
mylocation-android
And the first version of the application is live at https://mylocation.devaction.net
Please note that you will get "your connection is not private" warning (or some other similar one depending on your browser of choice) when accessing it because of the self-signed certificate, but as long as you check that the SHA-256 fingerprint matches the following hexadecimal digits, you are safe:
DA C1 F8 06 D2 4E 17 C9 C4 F4 D7 47 40 AF CD F1
22 00 36 3E 97 CB 41 C2 63 DD 28 1F A0 51 12 29
Also, I do not think the backend will be able to handle much load since it runs on the smallest type of Amazon Lightsail instances (just 512 MB memory and one core processor) so if it is not able to keep up with the demand at least it would mean that this post has become somewhat popular :-)
I could write much more on related topics such as:
- how I combined Vert.x and Spring in the backend
- the Android service which fetches the location provided by the GPS
- client-side certificate
- the application configuration (loading, password encryption)
- RxJS
- the Vert.x event bus SockJS bridge
- the social implications of sharing my live location with potentially everybody (spoiler alert: I introduced a "masking" security mechanism in the Android code to keep the area where I live under the radar)
But I will leave that for future chapters of this journey since this learning exercise is far from over yet, stay tuned!
I am an experienced Java developer and (surprise!) I like Java. I know it is not perfect but it works just fine for me (I enjoy type-safety and I do not consider verbosity a disadvantage, quite the opposite). I also know that some people dislike Java, which is also fine.
But recently I decided to step out of my confort zone as developer, my goal isn't to be one of the "cool kids" neither trying to monetize a new skill in the job market.
I have a quite practical motivation: I want to be able to build more (different) stuff.
That's exactly the same reason why I learnt Android development by myself a couple of years ago.
Web applications are ubiquitous, even more than native mobile apps, and thanks to cloud computing, one can easily and inexpensively release their idea/app to the World Wide Web.
I already did some Web development in the past, in the bad old days of JSP and JSF, but the process was slow and painful.
Nowadays the Web landscape has totally changed though, JavaScript is a mature language, it provides classes (well, not really, but bear with me) and a whole ecosystem which includes dependency injection, dependency resolution, a backend server (Node.js) and advanced IDEs.
The JavaScript Framework
So the first step was to decide what to use for frontend development, among the numerous options, there are two main ones (by popularity): React or Angular.
After some research it seemed that Angular was more suitable for devs coming from the Java world, mainly because of two reasons:
- Typescript is more strongly typed than "naked" JavaScript, which makes it more similar to Java.
- Angular is a framework (not a library like React) which means that it provides more guidance (it's opinionated) and includes a comprehensive set of helper tools (e.g., a CLI).
So I chose Angular and VSCode as my Integrated Development Environment.
The Proof Of Concept
After having decided with what I'd code, one more important question remained open: what to code.
All I knew is that I wanted to make a modern (albeit simple) single page Web site. And by modern I essentially meant asynchronous live data loading onto the UI without user interaction (i.e., server data push, no need to click the "refresh" button).
I decided the application would push location updates from my phone to the backend running on AWS and then to the Web browser.
All the data transfers would be in JSON format and secured by HTTPS (self-signed certificate).
And since I was already in 'adventurous mode', I decided to use Vert.x (a Java framework to build reactive applications) in the backend because it had been on my radar for a while already and it also provides good integration with JavaScript through its SockJS event bus bridge.
You can see how the web application works in the following video:
The Code
After several weeks of after-work coding and dealing with three different Git repositories, three different IDEs (AndroidStudio, Eclipse and VSCode) and two programming languages (Java and Typescript), I am ready to share the code with anyone who would care to have a look at it:
mylocation-frontend
mylocation-backend
mylocation-android
And the first version of the application is live at https://mylocation.devaction.net
Please note that you will get "your connection is not private" warning (or some other similar one depending on your browser of choice) when accessing it because of the self-signed certificate, but as long as you check that the SHA-256 fingerprint matches the following hexadecimal digits, you are safe:
DA C1 F8 06 D2 4E 17 C9 C4 F4 D7 47 40 AF CD F1
22 00 36 3E 97 CB 41 C2 63 DD 28 1F A0 51 12 29
Also, I do not think the backend will be able to handle much load since it runs on the smallest type of Amazon Lightsail instances (just 512 MB memory and one core processor) so if it is not able to keep up with the demand at least it would mean that this post has become somewhat popular :-)
I could write much more on related topics such as:
- how I combined Vert.x and Spring in the backend
- the Android service which fetches the location provided by the GPS
- client-side certificate
- the application configuration (loading, password encryption)
- RxJS
- the Vert.x event bus SockJS bridge
- the social implications of sharing my live location with potentially everybody (spoiler alert: I introduced a "masking" security mechanism in the Android code to keep the area where I live under the radar)
But I will leave that for future chapters of this journey since this learning exercise is far from over yet, stay tuned!
I am attracted by the info which you have provided in the above post.frontend development agency It is genuinely good and beneficial info for us. Continue posting, Thank you.
ReplyDeleteAmazingly helpful which you have shared here. I am impressed by the details and also it is a significant article for us. Continue imparting this sort of info.online b2b travel platform development. Thank you.
ReplyDeleteThank you for sharing your journey, it is really inspiring. There are several tools and technologies full stack developers need to learn. Keep sharing your valuable knowledge and experience. Great blog. Full stack developer course in Chennai
ReplyDeleteI generally want quality content and I found that in your post. The information you have shared about full-stack development is beneficial and significant for us. Keep sharing these kinds of articles here. Hire Custom Developers in USA
ReplyDeleteI am very grateful that I found some helpful content about full-stack development in this post. After reading it, I think that you have good knowledge. Thanks for posting it. Keep it up. Full Stack Development Services in USA
ReplyDeleteYou have a genuine capacity to compose a substance that is useful for us. You have shared an amazing post about seo agency for healthcare.Much obliged to you for your endeavors in sharing such information with us.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteMuch obliged to you for your endeavors in sharing such information with us.
ReplyDeleteWordPress Web Development Services is all we do! We help our clients build the best WordPress websites possible
WordPress Development
As it's so unlikely to actually occur, you are better off saving 우리카지노 your cash and betting on the participant or the banker as an alternative. Here you'll find the proportion of Banker, Player, and Tie bets. You'll additionally get one thing no casino will provide you with|provides you with}, the home fringe of the same three bets primarily based on the exact composition of the remaining playing cards. Finally, for you card counters on the market, we make it easy by exhibiting you quantity of} of each rank are left within the shoe. FAFA212 offers a generous welcome offer that may enable players to get pleasure from and play more games. Exciting bonuses additionally await new and present players to delay game sessions and increase successful streaks.
ReplyDeleteIf you want to invest in crypto but don't know much about this then we are here to help. Check this article Crypto To Buy Now. You can also track the current situation of cryptocurrency and many more.
ReplyDeleteGreat post, your all points fully clarify These steps are helpful for Thank you for providing such a valuable information. coding classes for middle school students
ReplyDeleteAs we have seen, I believe this article to be well-informed. The essay is helpful to us, and your writing style is extremely outstanding. Thank you for sharing this article.manga nato
ReplyDeleteWith a team of dedicated and experienced Laravel developers, we are committed to providing top-notch solutions tailored to meet your specific requirements. Whether you need a custom web application, an e-commerce platform, or a complex enterprise software, our team has the expertise to deliver results that exceed your expectations. Laravel Development Team
ReplyDeleteWell describe content. Thanks alot for sharing an full of knowledgeable post with us.
ReplyDeleteIt gives a good insight about development process.
Front-End Development Services Company
Machine learning development involves creating algorithms that enable computers to learn from and make decisions based on data. This field encompasses the design and implementation of models that can recognize patterns, predict outcomes, and improve over time with experience. Effective machine learning development can drive innovations across industries, enhancing automation, personalization, and data-driven decision-making.
ReplyDeleteUnlock the potential of large language model development to enhance your business operations! With the rise of AI, investing in large language model development can give your business a competitive edge. This technology enables smarter, faster decision-making, improves customer experiences, and scales operations efficiently.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteA Java developer's journey to full-stack involves mastering both backend and frontend technologies, creating a seamless integration between server-side logic and client-side user experience. Starting with Java for backend services, APIs, and databases, they then venture into frontend technologies such as HTML, CSS, and JavaScript. Learning frameworks like Spring Boot for Java and React or Angular for JavaScript, they build dynamic, responsive web applications. Embracing the full-stack path empowers Java developers to handle end-to-end development, enhancing their versatility and marketability. This comprehensive skill set allows JavaScript developers to bridge the gap between backend efficiency and frontend interactivity.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete