Per Jonsson perjo927

## js-frameworks.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                perjo927
                / js-frameworks.md
            
            
              Created
              January 18, 2014 23:08
                — forked from clarle/js-frameworks.md
            
          
    Next-generation JavaScript frameworks

Web application frameworks have been developing fast in the past few years, and as the technologies that they're built on top of get more advanced, each of these frameworks is able to provide newer features to help developers build more complex applications.  This year, we've seen the release of a new class of application frameworks that takes advantage of JavaScript's ability to be both on the client and the server.  What this allows these frameworks to do is provide both a new level of abstraction by sharing code between client and server, as well as embrace the benefits of both client-side rendering and server-side rendering.
For the end user, they get smooth, desktop-like responsiveness from client-side rendering, while still being able to maintain the SEO and accessbility benefits of server-side rendering.  For developers, that means writing less boilerplate code, and being able to focus more on writing the application logic.
Today, there are three main framew

  
## imperialmarch.ino
#include <Wire.h>
#include <Zumo32U4.h>

Zumo32U4Buzzer buzzer;

const char march[] PROGMEM =
"! O2 T100 MS"
"a8. r16 a8. r16 a8. r16 f8 r16 >c16"
"ML"
"a8. r16 f8 r16" "MS" ">c16 a. r8"

## CssUtils.ts
// cssUtils.ts
import { css } from "styled-components";

export const IEOnly: Function = style => {
  return css`
    @media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, & {
      ${style};
    }
  `;

## HoverSupported.css
/*
 * Compiled CSS:
  */
a {
  color: green;
}
@media not all and (pointer: coarse) {
  a:hover {
    color: blue;
  }

## gitbot.ps1
<#
Gitbot
Makes Your Git Stats Great
#>

param([string]$path="C:\")

function GenerateName {
    $filepath = Resolve-Path "words.txt"
    $raw = Get-Content -Path $filepath

## compose.test.js
import assert from "assert";

const compose = (...functions) => (initialArg) =>
  functions.reduceRight(
    (accumulatedValue, func) => func(accumulatedValue),
    initialArg
  );

describe("compose", () => {
  it("returns a composed function h, so that h(x) is equal to f(g(x))", () => {

## index.html
<html>
    <head>
        <title>Todo App</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
<body>
  <script src="./index.js"></script>
</body>
</html>

## state.test.js
import { makeStateHandlers } from "../src/redux/store/state.js";

import assert from "assert";

describe("state.js", () => {
  describe("makeStateHandlers", () => {
    it("generates two functions from a state container input", () => {
        const stateContainer = [{ state: "state" }];
        const stateHandlers = makeStateHandlers(stateContainer);

## dispatch.js
export const makeDispatcher = (stateHandlers, reducer, onDispatch) => ({
  dispatch(action) {
    const { getState, setState } = stateHandlers;

    const state = getState();
    const newState = reducer(state, action);
    setState(newState);

    onDispatch();

## state.js
export const makeStateHandlers = (stateContainer) => ({
  getState() {
    const [lastState] = stateContainer.slice(-1);
    return lastState;
  },
  setState(newState) {
    return stateContainer.push(newState);
  },
});
	#include <Wire.h>
	#include <Zumo32U4.h>

	Zumo32U4Buzzer buzzer;

	const char march[] PROGMEM =
	"! O2 T100 MS"
	"a8. r16 a8. r16 a8. r16 f8 r16 >c16"
	"ML"
	"a8. r16 f8 r16" "MS" ">c16 a. r8"
	// cssUtils.ts
	import { css } from "styled-components";

	export const IEOnly: Function = style => {
	return css`
	@media all and (-ms-high-contrast:none) {
	*::-ms-backdrop, & {
	${style};
	}
	`;
	/*
	* Compiled CSS:
	*/
	a {
	color: green;
	}
	@media not all and (pointer: coarse) {
	a:hover {
	color: blue;
	}
	<#
	Gitbot
	Makes Your Git Stats Great
	#>

	param([string]$path="C:\")

	function GenerateName {
	$filepath = Resolve-Path "words.txt"
	$raw = Get-Content -Path $filepath
	import assert from "assert";

	const compose = (...functions) => (initialArg) =>
	functions.reduceRight(
	(accumulatedValue, func) => func(accumulatedValue),
	initialArg
	);

	describe("compose", () => {
	it("returns a composed function h, so that h(x) is equal to f(g(x))", () => {
	<html>
	<head>
	<title>Todo App</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<script src="./index.js"></script>
	</body>
	</html>
	import { makeStateHandlers } from "../src/redux/store/state.js";

	import assert from "assert";

	describe("state.js", () => {
	describe("makeStateHandlers", () => {
	it("generates two functions from a state container input", () => {
	const stateContainer = [{ state: "state" }];
	const stateHandlers = makeStateHandlers(stateContainer);
	export const makeDispatcher = (stateHandlers, reducer, onDispatch) => ({
	dispatch(action) {
	const { getState, setState } = stateHandlers;

	const state = getState();
	const newState = reducer(state, action);
	setState(newState);

	onDispatch();
	export const makeStateHandlers = (stateContainer) => ({
	getState() {
	const [lastState] = stateContainer.slice(-1);
	return lastState;
	},
	setState(newState) {
	return stateContainer.push(newState);
	},
	});