Frontend Thursday vol. 44

1. Microsoft Teams 2.0

Microsoft Teams to aplikacja, która dzięki pandemii zdobyła globalną rozpoznawalność. Jest to też jedna z sztandarowych aplikacji wymienianych jako przykład wdrożenia Electrona na produkcji. No cóż, niedługo stan rzeczy się zmieni, bo w minionym tygodniu CVP Microsoftu (jeśli też zastanawiacie się jak rozwinąć ten korporacyjny skrót, to chodzi tu o Corporate Vice President) pochwalił się na Twitterze, że wkrótce flagowy komunikator firmy z Redmont dostanie aktualizację zastępującą Electrona Edge Webview2. Z czego wynika takie posunięcie? Electron znany jest z zasobożerności, szczególnie jeśli chodzi o RAM. Microsoft posiada nawet stronę w dokumentacji wyjaśniającą z czego wynika takie zużycie pamięci (TLDR: Chromium w celu optymalizacji rezerwuje sobie tak dużo pamięci jak to tylko możliwe). Nowe rozwiązanie to autorski twór microsoftu, który oprócz lepszego zarządzania zasobami oferuje też Evergreen Distribution, czyli możliwość utrzymania użytkowników z najnowszą wersją przeglądarki. Wszystko jest o tyle ciekawe, że Edge również pod spodem bazuje na Chromium.

Nowa wersja teamsów przynosi też jedną nowość, która szczególnie boli moje Angularowe serducho: całość aplikacji została przepisana z Angulara na Reacta. Mam nadzieję, żę inżynierowie z Microsoftu podzielą się kiedyś artykułem, w którym wyjaśnią powody podjęcia takiej decyzji.

Źródła:

https://tomtalks.blog/2021/06/microsoft-teams-2-0-will-use-half-the-memory-dropping-electron-for-edge-webview2/
https://blogs.windows.com/msedgedev/2020/10/19/edge-webview2-general-availability/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. Google opóźnia FLoC do 2023

FLoC to temat, o którym szerzej rozpisywałem się w edycji 33 naszego przeglądu, ale gwoli ścisłości postaram się w dwóch zdaniach przypomnieć o co chodzi. Otóż Google opracował algorytm klastrujących użytkowników lokalnie na ich maszynach. W teorii wszystko brzmi świetnie, ale po przyglądnięciu się bliżej, rozwiązanie to raczej pogarsza niż poprawia prywatność użytkowników. W tym kontekście na pewno cieszy fakt, że Google postanowił póki co wstrzymać się z globalnym wdrożeniem algorytmu w Chrome do 2023 roku. Dodatkowy czas Google zamierza wykorzystać na rozpoczęciu publicznej dyskusji dotyczących prywatności w kontekście personalizacji reklam jak i negocjacjach z innymi dużymi graczami w świecie przeglądarek i e-commerce.

Źródła:

https://arstechnica.com/gadgets/2021/06/google-delays-floc-rollout-until-2023/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

3. SolidJS

Jak głosi stare programistyczne porzekadło: tydzień bez nowego javascriptowego frameworku to tydzień stracony. Po prawie roku tworzenia naszych frontendowych przeglądów jestem pewien, że mocno mija się ono z prawdą, ale w tym tygodniu rzeczywiście na rynku pojawił się nowy gracz, który wzbudził trochę zamieszania. Raczej nie przebije się on do czołowej trójki frontendowych frameworków. Ba, myślę, że pozycja czwartego Svelte również nie jest na razie zagrożona. Dlaczego więc podrzucamy Wam to rozwiązanie? Otóż od czasu do czasu warto wyjść poza strefę komfortu i wydeptane ścieżki i zerknąć na alternatywne rozwiązania. Może w ciągu kilku najbliższych lat (o ile w ogóle) nie znajdziecie pracy w SolidJS, to taka podróż może odrobinę zmienić to jak piszecie swój kod w Angularze, Vue czy Reactie. Jeśli Was przekonałem to w źródłach znajdziecie całkiem niezły zestaw tutoriali, idealnych do przerobienia w czwartkowy wieczór

import { createEffect, For } from "solid-js";
import { createStore, SetStoreFunction, Store } from "solid-js/store";
import { render } from "solid-js/web";
function createLocalStore<T>(initState: T): [Store<T>, SetStoreFunction<T>] {
	const [state, setState] = createStore(initState);
	if (localStorage.todos) setState(JSON.parse(localStorage.todos));
	createEffect(() => (localStorage.todos = JSON.stringify(state)));
	return [state, setState];
}
const App = () => {
	const [state, setState] = createLocalStore({
		todos: [],
		newTitle: ""
	});
	return (
		<>
			<h3>Simple Todos Example</h3>
			<input
				type="text"
				placeholder="enter todo and click +"
				value={state.newTitle}
				onInput={(e) => setState({ newTitle: e.target.value })}
			/>
			<button
				onClick={() =>
					setState({
						todos: [
							...state.todos,
							{
								title: state.newTitle,
								done: false
							}
						],
						newTitle: ""
					})
				}
			>
				+
			</button>
			<For each={state.todos}>
				{(todo, i) => {
					const { done, title } = todo;
					return (
						<div>
							<input
								type="checkbox"
								checked={done}
								onChange={(e) =>
									setState("todos", i(), { done: e.target.checked })
								}
							/>
							<input
								type="text"
								value={title}
								onChange={(e) =>
									setState("todos", i(), { title: e.target.value })
								}
							/>
							<button
								onClick={() =>
									setState("todos", (t) => [
										...t.slice(0, i()),
										...t.slice(i() + 1)
									])
								}
							>
								x
							</button>
						</div>
					);
				}}
			</For>
		</>
	);
};
render(App, document.getElementById("app"));

Źródła:

https://dev.to/ryansolid/solidjs-official-release-the-long-road-to-1-0-4ldd
https://www.solidjs.com/tutorial/introduction_basics