mcavaliere

// /javascripts/mycompany.js
var MyCompany = {};

// /javascripts/mycompany/widgets
MyCompany.Widgets = {};
MyCompany.Widgets.data1 = 123;
MyCompany.Widgets.func1 = function() {};

// /javascripts/mycompany/htmlutils.js
MyCompany.HtmlUtils = {};

mcavaliere

$.MyCompany = {
  Widgets: {
    data1: 123,
    func1: function() {}
  },
  HtmlUtils: {
    data1: 123,
    func1: function() {}
  }
};

mcavaliere

// Top level. All reusable code goes somewhere under this main object.
var MyApp = {};

// Widgets, and any components that manipulate the DOM.
MyApp.UI = {};

// Classes that have reusable logic or calculation.
MyApp.Lib = {};

// Custom code that works with external javascript libraries in a reusable way.

mcavaliere

var MyApp = {};

MyApp.namespace = function() {
  var ln = arguments.length, i, value, split, x, xln, parts, object;
  
  for (i = 0; i < ln; i++) {
    value = arguments[i];
    parts = value.split(".");
    object = window[parts[0]] = Object(window[parts[0]]);
    

mcavaliere

// /javascripts/myapp/ui/fancyslider.js

MyApp.ns("MyApp.UI.FancySlider");

MyApp.UI.FancySlider = function() {
  // ...
};

mcavaliere

class SimpleComponent extends Component {
	render() {
		return (
			<View style={{ borderRadius: 5 }}>
				<View style={{ backgroundColor: 'beige', padding: 5 }}>
					<Text style={{ color: 'black', fontSize: 16, fontWeight: 'bold' }}>{ this.props.title }</Text>
				</View>
				<View style={{ padding: 5 }}>
					<Text style={{ color: 'black', fontSize: 12 }}>{ this.props.bodyText }</Text>
				</View>

mcavaliere

let Style = StyleSheet.create({
	container: { borderRadius: 5 },
	heading: { backgroundColor: 'beige', padding: 5 },
	headingText: { color: 'black', fontSize: 16, fontWeight: 'bold' },
	body: { padding: 5 },
	bodyText: { color: 'black', fontSize: 12 }
})

class SimpleComponentWithoutLiterals extends Component {
	render() {

mcavaliere

class SimpleComponentWithCascade extends Component {
	render() {
		return (
			<View style={[ ComponentStyles.container, LayoutStyles.marginBottom ]}>
				<View style={[ ComponentStyles.heading, LayoutStyles.paddingSm ]}>
					<Text style={[ ComponentStyles.headingText, TypographyStyles.heading3, TextColors.black ]}>{ this.props.title }</Text>
				</View>
				<View style={[ ComponentStyles.body, LayoutStyles.paddingSm ]}>
					<Text style={[ ComponentStyles.bodyText, TypographyStyles.bodyText, TextColors.darkGrey ]}>{ this.props.bodyText }</Text>
				</View>

mcavaliere

class MessyCardComponent extends Component {
	render() {
		return (
			<View style={[ CardComponentStyles.container, LayoutStyles.wideMargin, GlobalStyles.shadedBox ]}>
				<View style={[ CardComponentStyles.headingBar, LayoutStyles.smPadding, BackgroundColors.mediumGreen ]}>
					<Text style={[ TypographyStyles.heading1, Colors.textAbsoluteBlack ]}>{ this.props.title }</Text>
				</View>
				<View style={[ CardComponentStyles.contentContainer, BackgroundColors.offWhite ]}>
					<Text style={[ TypographyStyles.bodyText, Colors.textAbsoluteBlack ]}>{ this.props.children }</Text>
				</View>

mcavaliere

import Constants from '../constants';

export default const Colors = {
	black: {
		default: '#232323',
		absolute: '#000000'
	},

	white: {
		default: '#ffffff'