Web Frameworks, JAMStacks and Native Apps
Overview
The profession of software development needs a strong self-learning ability, which is one of the most vital abilities for students as well. Having done some searching on the Internet, I am confident to say that the availability of pieces of knowledge online, especially technologies in computer theory and programming areas, is at a high level. That means learning online could considerably benefit the occupation of a software developer and other IT-related jobs. The tech stacks I used during the internship could be learned from essay tutorials, videos, and official documents. Besides, with the power of the AI programming assistant, GitHub Copilot, learning a new tech stack could be much easier than before. Totally speaking, every single technology is not isolated from the others; they work together to achieve a further outcome. Technical speaking, they achieved this result by sharing APIs with each other or entirely further designing based on another technology as a relationship of encapsulation.
Specifically, during my internship in BluPurple, I learned several technologies: React.js, Next.js, Vue.js, Nuxt.js, Vercel, Netlify, TailwindCSS, Firebase, Puppeteer, SwiftUI, and Vite. The development environments used: node.js, conda, and Swift; IDEs I worked on are vim, WebStorm, and Xcode.
Frameworks
We should figure out what these tech stacks could achieve and how they work together, hence; I have drawn a diagram that could aid in illustrating the relationship between these tech stacks. Modern web application development tools function like traditional JS, HTML, and CSS, however; since node.js, many frameworks have emerged. These frameworks are designed to achieve a higher level of web software design by encapsulating traditional tech stack, especially for JS. Such as, Vue.js is a progressive framework for building the user interface, which encapsulates DOM and exposes a virtual layer for developers to manipulate with actual DOM in the HTML file. As a result, Vue.js achieve efficient development compared with pure JavaScript. React.js functions similarly to Vue.js. However, developers can create a web application using only JavaScript codes, although JSX still has HTML-like codes to describe contents. Here is a comparison of Vue.js and React.js codes.
<script setup>
import { ref } from 'vue'
const name = ref('ex10si0n')
</script>
<template>
<div>
<div>Hello {{ name }}!</div>
<input v-model="name" />
</div>
</template>
const { useState } = React;
const App = () => {
const [value, setValue] = useState('ex10si0n');
const handleChange = (e) => setValue(e.target.value);
return (
<div>
<div>Hello {value}</div>
<input value={value} onChange={handleChange} />
</div>
);
};
JAMStack
The following image describes components and internal relationships in JAMStack technology, further illustrating the purple area in the previous diagram. A website claiming to use JAMStack should decouple the front-end and back-end with APIs, the front-end part has been built into HTML, CSS, and JavaScript files, and JavaScirpt can be introduced to pre-rendered sites on an as-needed basis. Hence, adopting JAMStack could lead to faster performance, a cheaper server expense that only stores static files, higher scalability, and better cooperation within developer teams.
Native Apps
Native App development is a trade-off between a better development experience and better UX (user experience). Due to the limitation of Web Browsers, some functionalities, such as invoking built-in system GPS, or notifications, could not easily be achieved by web applications. However, the web application has a responsive design, meaning a developer can design a web page once and distribute it to devices with different resolutions (i.e., changing the browser window size). The trade-off exists though, with mutual evolvement, whether Web Apps or Native Apps, the philosophy of client-side programming has been similar. Since web frameworks appeared, the front-end definition has been updated into a functional application rather than a user interface. Although a new-defined front-end is still in the payload of a web page, it works similarly to a native application. Since necessary functionalities have been reimplemented by JavaScript rather than implemented in the serverside back-end, modern front-end design only exchanges data with servers using API requests. Move back to native apps; although their evolvement is not as significant as a web application, with the number of updates supported by Google and Apple, native apps have many brand new application scenarios, such as AR and ML. Due to its advantages in 'descent', it is more robust and has higher compatibility among mobile phones, tablets, laptops, and desktop computers. Besides, the visual design standard is much more elegant in native app development, such as SwiftUI (Apple iOS), material design (Google Android), and fluent design (Microsoft Windows).
Similar to Vue.js Single Page Application, SwiftUI Apps can be built in an MVVM pattern. Besides, there are also terms in SwiftUI similar to Vue components called views. SwiftUI has the main entry that contains several embedded views; refer to the following code, which implemented each row of features recommendation.
var body: some View {
HStack {
VStack(alignment: .leading, spacing: 5) {
Text(landmark.name)
Text("\(Int(clCooridnate.distance(to: CLLocationCoordinate2D(latitude: lat, longitude: lng)))) m")
HStack() {
Image(systemName: "car.fill")
Text("\(landmark.car)")
Image(systemName: "bicycle")
Text("\(landmark.motor)")
Spacer()
}
}
Spacer()
MapView(coordinate: landmark.locationCoordinate, name: landmark.name)
.frame(width: 100, height: 100,
alignment: .bottom)
.ignoresSafeArea()
.allowsHitTesting(false)
}.frame(height: 100)
}
And the component renders an example:
Feel free to explore more exciting codes to implement mPark, and I have uploaded them on GitHub at Ex10si0n/MPark. Besides, internship codes have been open source at Ex10si0n/intern-codes for learning and referencing purposes.
Ex10si0nEx10si0n