feat: webpack template for classic apps #11858

janvennemann · 2020-07-31T23:22:44Z

JIRA: https://jira.appcelerator.org/browse/TIMOB-27716

Optional Description:

This is a revamped version of the default two-tabbed app template for Webpack enabled projects. It adds a bunch of additional stuff that isn't in the original default template, but where i felt that users will probably add it anyway sooner or later.

Two-tabbed UI example with a very basic layout using labels on the first tab, and a more complex layout example on the second tab.
New app icon and launch image. They are placed in separate files so they can easily be changed individually.
- Android: The app icons were generated using the Image Asset Studio in Android Studio and simply dropped into the app instead of using the appicon.png, enabling rounded and adaptive icons. The launch image is a single 9-patch PNG file.
- iOS: The app icons are generated from DefaultIcons.png in the project root, while the launch image comes from LaunchLogo.png.
- Note: We really need to get some structure into this. The sources for these are scattered around the project, which makes it quite confusing where to put all the files.
Custom theme for Android so users can easily change it. I figured that most users need this anyway at some point, so why not give them a minimal example to start with. I used it to align the look and feel of the app so it looks similar on both Android and iOS.
FontAwesome icon font to demonstrate custom font usage.
README file with basic build instructions and further links for how-tos and API docs
Source linting using eslint
VSCode extension suggestion. When users open the newly created project with VSCode and they don't have our extension, it will be suggested by VSCode.

Note

The updated Angular template and this template both contain a very similar hook to do various post project creation tasks like installing NPM dependencies. I plan to move this hook out of the templates to make it reusable. I'll do this next week in one of these two new template PRs. This PR now contains the shared post-create hook for Webpack enabled project and needs to be merged before #11852 can be tested.

build · 2020-07-31T23:48:05Z

	Fails
🚫	Tests have failed, see below for more information.

	Messages
📖	💾 Here's the generated SDK zipfile.
📖	✊ The commits in this PR match our conventions! Feel free to Rebase and Merge this PR when ready.
📖	❌ 2 tests have failed There are 2 tests failing and 708 skipped out of 7996 total tests.

Tests:

Classname

Name

Time

Error

ios.ipad.Titanium.UI.ImageView

image error event (13.3)

5.001

Error: timeout of 5000ms exceeded
file:///Users/build/Library/Developer/CoreSimulator/Devices/5B606453-2251-4E5B-B037-CF0DF170061A/data/Containers/Bundle/Application/C86C15E5-41B1-40F1-86AB-08DB775EA70C/mocha.app/ti-mocha.js:4326:27

ios.ipad.Titanium.UI.SearchBar

.focused (13.3)

5.829

Error: timeout of 5000ms exceeded
file:///Users/build/Library/Developer/CoreSimulator/Devices/5B606453-2251-4E5B-B037-CF0DF170061A/data/Containers/Bundle/Application/C86C15E5-41B1-40F1-86AB-08DB775EA70C/mocha.app/ti-mocha.js:4290:32

Generated by 🚫 dangerJS against 2db7667

sgtcoolguy · 2020-08-03T13:57:20Z

android/templates/app/webpack-default/template/platform/android/res/values/colors.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>


Is this file something that may get generated/overridden by the semantic.colors.json file for light/dark themes?

AFAIK we generate a ti.semantic.colors.xml for that, so we don't touch the default colors.xml.

templates/app/webpack-default/hooks/post-create.js

sgtcoolguy · 2020-08-03T14:06:50Z

templates/app/webpack-default/template/src/home.js

+		attributes: [ {
+			type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
+			value: '#E82C2A',
+			range: [ 5, 7 ]


totally unrelated to this PR, but this syntax really confuses me for range. I guess since I'm used to mathematical ranges being declared like (0, 5] or [1, 6] or [1, 6) where ( is exclusive and [ is inclusive. Obviously this is JS syntax and an array, but my brain immediately thinks: "oh, he's selecting text indices 5 to 7 inclusive" when actually you're selecting text starting at index 5, but for the next 7 characters. Not sure if anyone has any thoughts on making this more obvious without breaking backwards compatibility....
cc @jquick-axway @ewanharris @garymathews @vijaysingh-axway

I can totally relate. While writing this i was like, what the hell why is this range not doing what i want? This does not make any sense! Until i eventually looked up the docs and found out that the second value is the length, and not the end of the range.

We could modify the "range" property to accept either a dictionary or array. With a dictionary, you effectively have named parameters, making it more obvious how it works.

var attributedString = Ti.UI.createAttributedString({ text: "Hello World", attributes: [{ type: Ti.UI.ATTRIBUTE_UNDERLINES_STYLE, value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_SINGLE, range: { // Add support for dictionary. index: 6, length: 5, }, }, { type: Ti.UI.ATTRIBUTE_BACKGROUND_COLOR, value: "red", range: [6, 5], // <- The old way. }], });

Just another +1 on "wtf does that syntax mean". I like Josh's suggestion, it makes it a lot clearer to me

The dictionary seems like a great idea. I would prefer { start: 6, length: 5 } though ;)

sgtcoolguy · 2020-08-03T14:30:29Z

templates/app/webpack-default/template/src/profile.js

+const username = Ti.UI.createLabel({
+	text: 'Verona Blair',
+	font: {
+		fontSize: 28


Another nitpick unrelated to this PR: why do we name the property fontSize if it's going to be inside a font object. Seems redundant.

sgtcoolguy · 2020-08-03T14:34:03Z

templates/app/webpack-default/template/src/utils.js

+	const fontFamily = fontMap[style];
+	return Ti.UI.createLabel(Object.assign({}, {
+		font: {
+			fontFamily,


same deal as above, feels very redundant to me to preface these properties with font in the name if they'll be under a font object/property.

templates/app/webpack-default/template/src/utils.js

android/templates/app/webpack-default/template/platform/android/README.md

jquick-axway · 2020-08-04T05:02:38Z

templates/app/webpack-default/template/src/profile.js

+const title = 'Profile';
+const window = createWindow({ title, layout: 'vertical' });
+
+const scrollView = Ti.UI.createScrollView({ layout: 'vertical' });


You need to set creation property scrollType to "vertical" or else a warning will be logged on Android. This is because Android's native ScrollView does not support scrolling both vertically and horizontally like iOS. It needs to be told upon creation which direction to support. (It defaults to vertical, but will log a warning if the property is missing.)

const scrollView = Ti.UI.createScrollView({ layout: 'vertical', scrollType: 'vertical' });

Would it make sense to have a default value of vertical for that? Most of the time when i use scroll views i want them to be vertical anyway.

It already defaults to "vertical" now, but it logs a warning stating that you should explicitly set it. This warning comes from our code and it's been this way for years.

templates/app/webpack-default/template/src/profile.js

templates/app/webpack-default/template/tiapp.xml

ewanharris

No comments from me, this is awesome @janvennemann huge kudos for going above and beyond here

ewanharris · 2020-08-04T17:12:19Z

templates/app/webpack-default/template/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+	"recommendations": [
+		"axway.vscode-titanium"


I didn't know we can do this. We should do the same in all of our templates.

@janvennemann, @ewanharris, maybe we should add a /.vscode/settings.json file which tells the editor to ignore our generated directories. What do you think?

{ "files.exclude": { "build/": true, "i18n/": true, "platform/": true, "Resources/": true }, "search.exclude": { "build/": true, "i18n/": true, "platform/": true, "Resources/": true }, "files.watcherExclude": { "build/": true, "i18n/": true, "platform/": true, "Resources/": true } }

I wrote up a ticket to add these vscode files to our other app templates here...
https://jira.appcelerator.org/browse/TIMOB-28070

lokeshchdhry · 2020-08-11T17:56:48Z

FR Passed.

Webpack template for classic apps looks good.

This being the base for alloy & angular template, alloy template works as expected. Apps with this template build & run fine on Android & IOS on MAC & Windows.

Angular template will be tested in this PR #11852

feat: webpack template for classic apps

8019b2b

janvennemann added feature cli 📟 labels Jul 31, 2020

janvennemann requested review from ewanharris, vijaysingh-axway and jquick-axway July 31, 2020 23:22

build added this to the 9.2.0 milestone Jul 31, 2020

sgtcoolguy reviewed Aug 3, 2020

View reviewed changes

templates/app/webpack-default/hooks/post-create.js Outdated Show resolved Hide resolved

sgtcoolguy reviewed Aug 3, 2020

View reviewed changes

templates/app/webpack-default/template/src/utils.js Outdated Show resolved Hide resolved

sgtcoolguy reviewed Aug 3, 2020

View reviewed changes

android/templates/app/webpack-default/template/platform/android/README.md Outdated Show resolved Hide resolved

sgtcoolguy added the backport 9_3_X label Aug 3, 2020

janvennemann added 2 commits August 3, 2020 20:38

refactor: use shared webpack post-create hook

bb08e21

chore: address review feedback

bbbf3fb

janvennemann mentioned this pull request Aug 3, 2020

feat: update template for angular 9 #11852

Merged

jquick-axway reviewed Aug 4, 2020

View reviewed changes

chore: address another round of review feedback

9f5f3bc

ewanharris mentioned this pull request Aug 4, 2020

Add templates for webpack tidev/alloy#963

Merged

ewanharris approved these changes Aug 4, 2020

View reviewed changes

chore: use devDepedencies instead of dependencies

f42dcd9

build added the in-qe-testing 🕵 label Aug 5, 2020

janvennemann added the backport 9_1_X label Aug 10, 2020

Merge branch 'master' into TIMOB-27716

2db7667

sgtcoolguy merged commit 8eda95b into tidev:master Aug 11, 2020

build mentioned this pull request Aug 11, 2020

[Backport 9_1_X] feat: webpack template for classic apps #11893

Merged

build mentioned this pull request Aug 11, 2020

[Backport 9_3_X] feat: webpack template for classic apps #11894

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: webpack template for classic apps #11858

feat: webpack template for classic apps #11858

janvennemann commented Jul 31, 2020 •

edited

build commented Jul 31, 2020 •

edited

sgtcoolguy Aug 3, 2020

janvennemann Aug 3, 2020

sgtcoolguy Aug 3, 2020

janvennemann Aug 3, 2020

jquick-axway Aug 4, 2020 •

edited

ewanharris Aug 4, 2020

janvennemann Aug 4, 2020

sgtcoolguy Aug 3, 2020

sgtcoolguy Aug 3, 2020

jquick-axway Aug 4, 2020

janvennemann Aug 4, 2020

jquick-axway Aug 4, 2020

ewanharris left a comment

ewanharris Aug 4, 2020

jquick-axway Aug 4, 2020

jquick-axway Aug 5, 2020

jquick-axway Aug 5, 2020

lokeshchdhry commented Aug 11, 2020

feat: webpack template for classic apps #11858

feat: webpack template for classic apps #11858

Conversation

janvennemann commented Jul 31, 2020 • edited

build commented Jul 31, 2020 • edited

Tests:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jquick-axway Aug 4, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ewanharris left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lokeshchdhry commented Aug 11, 2020

janvennemann commented Jul 31, 2020 •

edited

build commented Jul 31, 2020 •

edited

jquick-axway Aug 4, 2020 •

edited