formidablelabs / formidable-playbook Goto Github PK
View Code? Open in Web Editor NEWThe Formidable development playbook.
Home Page: https://formidable.com/open-source/playbook/
License: MIT License
The Formidable development playbook.
Home Page: https://formidable.com/open-source/playbook/
License: MIT License
GOAL - Get dev / prod friendly sourcemaps
Find or write a parser that does something like the following:
<!-- INSERT:../../examples/frontend/src/es5/app1.js -->
(full source) or <!-- INSERT:../../examples/frontend/src/es5/app1.js:foo-comment -->
/* START:foo-comment */stuff/* END:foo-comment */
npm run build
.This site will be built following some of the conventions from other formidable-landers, and will be a single-page site with a bold header & lightweight body copy. As the documentation grows, we can look into breaking sections out into their own routes.
The site will live at http://formidable.com/open-source/playbook
draft suggestions
Omitting a shrinkwrap creates enormous risk for any frontend or backend project that relies on npm install
and node_modules
. The core problem is that an npm install
is likely to produce different results on different installs from the exact same root package.json
file.
The first level of why this is the case lies in the fact that although a package.json
might pin dependencies, it is extremely likely that the dependencies of those dependencies (and further down the dependency tree) will contain:
The second level if that any git dependencies that are not hash-specific (either master
or a tagged branch) can be updated at will.
Taking both of these considerations in mind, it becomes apparent that doing an npm install
at "time number 1" can be different from "time number 2".
Now, let's consider three critical points in time of the development to production workflow:
master
for a release. This is the cheapest time to discover bugs and fix them.If you don't have a shrinkwrap file, you are potentially deploying different packages for each of development, QA, and production time. This means that:
Thus, by locking down a shrinkwrap file you guarantee that:
While there is a slight development cost to maintaining a shrinkwrap file in the development workflows, in practically all cases where "correctness" is important to a production-facing application, using a shrinkwrap will be a strongly recommendation production best practice.
References:
little-loader
This is kind of a brain-dump of the different Electron topics I'd like to see in the playbook.
Subsection proposals:
Specific topics:
This here is an outline of a new top-level section for React Native mobile development.
Whereas the existing Frontend playbook content is heavily tooling-focused, I would like this document to also discuss concepts and patterns. React Native is in some ways an immature field and existing React best practices may not always apply, or it might not be clear how to apply them. The likelihood of a developer getting their very first React Native project is also rather high for the time being, and discussing basics and good practices add value.
Initial braindump, let's discuss and align practices with existing Formidable RN work and then revise structure and scope. Many of these topics are minor/contestable and might not be worth including in the playbook. Others might be too large and deserve to be a blog post or a library instead.
*.ios.js
and *.android.js
component files over switching on Platform.*
*.styles.ios.js
and *.styles.android.js
to avoid duplication of codeI think they have an update coming down the pipeline...
draft suggestion
node_modules
tree across npm and git dependencies.In the webpack-shared-libs.md
front-end documentation, there is note regarding cross-project sharing:
NOTE - Cross project sharing: The biggest thing to understand for shared libraries is that this first step can be completely independent of the second entry point build step -- across:
Multiple entry points in the same project / application
Multiple entry points in different projects / applications
This means that we have a truly portable, cacheable library for an entire website or collection of sites, unlike the project-specific code splitting solution.
But how can the shared library be used between completely different projects (i.e. a website composed of multiple front-end applications/components) when the manifest is created at runtime? How is manifest shared between different projects?
I know the shared library's bundle dist/js/lib.js
can be shared if we set the output target to UMD but how do we achieve this when projects are in completely different repos/builds? Am I missing something in my understanding? Any clarification would be super appreciated!!
Noticing a few issues likely related to SSR
We've shortened the npm run build
subcommands to be more terse using real bash. But this breaks windows builds.
Task: Make all npm
script commands windows compatible.
We should implement analytics using react-ga for this project
We should remove this TODO copy as it adds clutter to the home page in its current form. We will ensure that any notes for these todos are moved into issues.
Starting points:
Dev servers:
Meta:
Specifics
inspectpack
basicsinspectpack
action: sizes
inspectpack
action: duplicates
+ versions
inspectpack
action: parse
+ files
+ patterns
source-map-explorer
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.